HotDog 5 Source - Layout of help file:

A quick description of the layout of this help file.

Main Form Help  (uses window concep)

Each topic corresponds directly with a form in the HotDog project. Main form help is named with the following convention:

<form name>_Main   e.g. frmMain_Main

<form name>_HT_Subject

<form name>_Caption   e.g. frmMeta_Enable_Redirection (popup help)

<form name>_mtnc_Name  (Form Maintenance)

Conceptual Help

Topic_Main   e.g. frmMain_Main

Topic _HT_Subject

Topic _mtnc_Name  (Form Maintenance)

Background and Discussion Help (uses window concep)

Naming Convention:

tutorial_Subject

Help Windows

concep

  Now has non-scrolling region

howto

  Now has non-scrolling region


Brian saw this 2/3/98


Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help Main Form Help


Insert Menu Insert Menu Insert Menu Insert Menu Insert Menu Insert Menu Insert Menu Insert Menu Insert Menu


Inserting Images

The Insert Image window gives you a convenient way of inserting Images into your document. If you are new to HTML click the [image] button to start a wizard to guide you through the process.

To quickly insert an Image in your document

1	Click the [image] button and using the File Picker choose the image file you want to insert. A preview of the image you chose appears in the “Image Preview Window”.

2	Click OK to insert the image into your document.

For further Help

 How to display the Insert Image dialog.

 How to start the Insert Image Wizard.

 An explanation of all the different attribute boxes in the Insert Image Dialog.

 Inserting Images using the Local File Manager.

Tip

To make an Image “clickable” i.e. when a visitor clicks on your image they are linked to a new document, start the Insert Image Wizard.

  Related Topics


Displaying the Insert Image Dialog

 On the Insert menu click on Image…


 Starting the Insert Image Wizard

1	On the Insert menu click on Image…

2	Then click the [image] button to start the Insert Image Wizard.


The attributes used in the Insert Image Dialog

Each of the boxes in the Insert Image Dialog corresponds to an Image Attribute. For example, when you select a border of 3 pixels, the Insert Image Dialog generates the Image Tag, <IMG>, with the border attribute. For example,

<IMG SRC=”pic.jpg” BORDER=”3”>.

Image Filename

This is the filename of the image you want to insert into your document. Click the [image] button to find the image you want to insert or click the wizard button to start the Insert Image Wizard.

Image Height

After selecting an image, its height in pixels is automatically displayed in the height box. You can change this height to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

Image Width

After selecting an image, its width in pixels is automatically displayed in the width box. You can change this width to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

Text Description

Some users, to save time or bandwidth, don’t display images. For this reason you should always have a meaningful text description accompanying your image. This text description is only displayed when the image is loading, or if a user has turned images off on their browser.

Image Alignment

The alignment of an image is relative to the text around it, and the alignment you choose affects how text wraps around your image. Full examples and tutorials are provided in the “Using HTML Alignment Attributes to Layout your Web Page” tutorial.

Border Width

This defines the border around the image. When you make an image clickable - that is, insert a URL around an image, an ugly border appears. You can remove this border by setting the Border Width to zero.

Horizontal Distance from Text

This defines an area around your image. The units are in pixels. Effectively, it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

Vertical Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

This is by no means a complete listing of all the possible attributes an image can use. For a comprehensive listing, see the HTML Property Sheet.


Image Filename

This is the filename of the image you want to insert into your document. Click the [image] button to find the image you want to insert or click the wizard button to start the Insert Image Wizard.

  Overview


Image Height

After selecting an image, its height in pixels is automatically displayed in the height box. You can change this height to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

 Overview


Image Width

After selecting an image, its width in pixels is automatically displayed in the width box. You can change this width to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

 Overview


Text Description

Some users, to save time or bandwidth, don’t display images. For this reason you should always have a meaningful text description accompanying your image. This text description is only displayed when the image is loading, or if a user has turned off images on their browser.

 Overview


Image Alignment

The alignment of an image is relative to the text around it, and the alignment you choose affects how text wraps around your image. Full examples and tutorials are provided in the “Using HTML Alignment Attributes to Layout your Web Page” tutorial. Click the related topics button below for more details.

 Overview


Border Width

This defines the border around the image. When you make an image clickable - that is, insert a URL around an image, an ugly border appears. You can remove this border by setting the Border Width to zero.

 Overview


Horiz Dist from Text
Horizontal Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

 Overview


Vert Dist from Text
Vertical Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

 Overview


Image Processing

Because a visitor has to download every one of your images to correctly view your web page, image processing is of paramount importance. The term “Image Processing” is used here in the sense of optimizing your image's quality with respect to its file size. The JPEG picture format lets you compress you image. This means that you can make your image file size smaller which is very useful for download times. However, there is a price to pay for this compression. JPEG compression is not perfect. This means that as you compress your image, it looks more and more blurred and pixelated. The Image Preview Dialog has the tools you will require to tweak your image to allow for the perfect file size to image quality trade off.

What do you want to do?

 Start HotDog Image Lab

 Give your Image a transparent color

 Compress your image’s file size

 Use LOWSRC images with your images

 Change the format of an image (i.e. GIF to JPEG etc.)

  Related Topics


Display the Image Preview Dialog
Display HotDog Image Lab

1	In your document, right click over an image tag. (<IMG…>)

2	Select “Preview Image”

3	Click “Convert”.


Give your Image a transparent color

1	In your document, right click over the image you want to add a transparent color to.

2	Click “Convert”.

3	Click the “GIF” radio button.

4	Check the “Transparent” box.

5	Using the Color Picker [image] select the color in your image you want to be made transparent.

6	Click “Save As” to save your image.


Compress your image's file size

1	In your document, right click over the image you want to compress (or convert to a JPEG).

2	Click “Convert”.

3	Click the “JPEG” radio button

4	Check the “Auto” button to get constant updates on how your image appears.

5	Use the compression slider to change the compression of your image. Keep an eye on the Image File Size caption to see how much your image is compressed.

6	Click “Save As” to save your new image.

 The Compression Slider

This slider sets the level of compression used on your JPEG image. If you use full compression your image noticeably degrades. So, as you increase the compression, keep an eye on the image file size and image preview. This will allow you to gauge the optimal image quality vs image file size.


Save your Image as a PNG

1	In your document, right click over the image you want to convert to a PNG.

2	Click the “Save as PNG” button.

3	Click OK.


Use LOWSRC images with your images

When a visitor loads an image from your Web page, the waiting can be quiet tedious. One solution is provided by HTML. Before loading your main, high quality image, the browser loads another image you provide first. This image is a highly compressed picture that, as a result, is usually of low quality. This image is loaded quickly by the browser and gives the user an idea of the images to come, so hopefully they will stick around. Your high quality image is loaded over the top of your low quality image after all of the LOWSRC images have been loaded. The result is that a visitor is less likely to feel frustrated about not being able to see content related images. The Insert Image Wizard and BandWidth Buster can automatically generate the LOWSRC files for you.

What do you want to do?

 Start the Insert Image Wizard.

 Install the Bandwidth Buster SuperTool.


Change the format of an image

1	In your document, right click over the image you want to convert.

2	Click “Convert”.

3	These are two options, GIF or JPEG. Click the file type you want the image converted to.

4	Click Save As.


Image Preview

As images are hard to recognize from their file names, an Image Preview is provided. If you are creating transparent GIF’s, you can use the Image Preview to select the color you want to make transparent. If you are using JPEG compression you can use the Image Preview to gauge the quality of your image under different compression levels.

  Overview


Image Download Time

This list box gives you an indication of how long the image takes to download under different modem speeds.

  Overview


Convert or Process Image

If you want to process your image - add a transparent color or change the images compression level, click the “Convert” button.

  Overview


Initial Image

Displays the initial image. This image is used to compare with the modified image for the purposes of determining image quality.

  Overview


Modified Image

Displays the modified image. This image is used to compare with the modified image for the purposes of determining image quality.

  Overview


Convert to GIF Format

GIF is a common file format used on the web. It has two key advantages over JPEG, the other common format. The first is that you can select a transparent color. The second is that for small images (like buttons and icons) its compression make file sizes smaller than corresponding JPEG’s.

  Overview


Convert to JPEG Format

The JPEG image format has one key advantage over GIF - compression. For any complex image (containing many colors) larger than about 3x3 cm, JPEG will usually produce smaller file sizes than GIF. Furthermore, JPEG comes with varying levels of compression.

  Overview


Auto Preview

Check this box to tell Image Lab to automatically preview any changes you have make to your image.

  Overview


Preview Button

Click this button to preview any changes you have made to your image.

  Overview


Zoom Option

Click this button to create a zoom box.

  Overview


Crop Image

Check this option to crop an image.

  Overview


Resize Image

Check this box if you want to resize your image.

  Overview


Resized Width

How long the resized image will be in pixels.

  Overview


Resized Height

How high the resized image will be in pixels.

  Overview


Keep Image Ratio

A long thin image that is shrunk to a box of 70x70 pixels will appear distorted. By maintaining the aspect ratio of an image you avoid the distortion but some images will have large borders.

70x70 Image Thumbnails

Maintained Aspect Ratio	Did not maintain Aspect Ratio.
  Overview


Resize Algorithm

There are various algorithms for re-sizing images. All have different advantages and disadvantages. Experiment with the list below to find the one most suitable for your image.

  Overview


Load Palette

Click this button to load a palette to apply to your image.

  Overview


Select Palette

This list contains palettes that you have used before. To apply a palette from this list, simply select it.

  Overview


Reduce Palette

Check this option if you want to reduce the number of colors in your image.

  Overview


Set Maximum Colors

Use this box to enter the maximum number of colors in your image.

  Overview


Dithered or Flat Colors

Choose between either Dithered Coloring (the use of two colors in a region to create the illusion of a third) or Flat Coloring (where only one color is used in a region).

  Overview


Transparent Option

Check this option if you want to add a transparent color to your image.

  Overview


Transparent Color

To select a color to be transparent from the image preview window, click this button, and with the color picker, click over the part of your image that you want to be transparent. All of the selected color in your image will appear “invisible” when rendered by a browser. That is, any background images will show through the transparent color.

  Overview


Compression Slider

This slider sets the level of compression used on your JPEG image. If you use full compression your image noticeably degrades. So, as you increase the compression, keep an eye on the image file size and image preview. This will allow you to gauge the optimal image quality vs image file size.

  Overview


Blur Slider

This slider controls the amount of blur in your image. JPEG files tend to be smaller in blurrier images.

  Overview


Color image in Greyscale

Check this option to render your image in greyscale.

  Overview


Image Preview

As images are hard to recognize from their file names, an Image Preview is provided. If you are creating transparent GIF’s, you can use the Image Preview to select the color you want to make transparent. If you are using JPEG compression you can use the Image Preview to gauge the quality of your image under different compression levels.

  Overview


Stretch Image to fit window

If your image is too large to fit into the preview window, check this option and the image will be made to fit inside the preview image window.

  Overview


Image Properties

This panel contains the following information: Image Width and Height as well as the Image File size. If you decide to optimize your image using JPEG compression, keep an eye on both the image preview and the image file size. This way you can find the best balance between image quality and file size.

  Overview


Save as GIF

GIF is a common file format used on the web. It has two key advantages over JPEG, the other common format. The first is that you can select a transparent color. The second is that for small images (like buttons and icons) its compression make file sizes smaller than corresponding JPEG’s.

  Overview


Transparent Color

If you want your GIF to have a transparent color, check this box. Then use the “Picker” tool to select the color you want to be transparent. You can either click on a section of your image in the “Image Preview” box to set the transparent color, or click the [image] button to open the Sausage Color Picker to select the color you want to use.

  Overview


Color Picker Button

To select a color to be transparent from the image preview window, click this button, and with the color picker, click over the part of your image that you want to be transparent. All of the selected color in your image will appear “invisible” when rendered by a browser. That is, any background images will show through the transparent color.

  Overview


Color Picker Color

If you want to load a custom palette to select a transparent color, click the color picker button

  Overview


Save as JPEG

The JPEG image format has one key advantage over GIF - compression. For any complex image (containing many colors) larger than about 3x3 cm, JPEG will usually produce smaller file sizes than GIF. Furthermore, JPEG comes with varying levels of compression.

  Overview


Compression Level

This slider sets the level of compression used on your JPEG image. If you use full compression your image noticeably degrades. So, as you increase the compression, keep an eye on the image file size and image preview. This will allow you to gauge the optimal image quality vs image file size.

  Overview


Save as PNG

PNG is a new graphics format, supported by browsers, which is in many respects comparable to GIF. However PNG requires no licensing.

  Overview


Convert

If you want to process your image - add a transparent color or change the images compression level, click the “Convert” button.

  Overview


AutoCreate Low Res File
AutoCreate Low Resolution Image

A Low Resolution Image is a quick loading picture (i.e. very small file size) that is loaded before your main image is loaded. This way visitors can see general features of your image while it is loading. This option tells HotDog to automatically create, and insert a Low Resolution Image for you.

  Overview


Specify your own Low Res File
Specify your own Low Resolution Image

A Low Resolution Image is a quick loading picture (i.e. very small file size) that is loaded before your main image is loaded. This way visitors can see general features of your image while it is loading. This option lets you specify your own low resolution image rather than letting HotDog create one for you.

  Overview


Horizontal Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

  Overview


Vertical Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

  Overview


Image Alignment

The alignment of an image is relative to the text around it, and the alignment you choose affects how text wraps around your image. Full examples and tutorials are provided in the “Using HTML Alignment Attributes to Layout your Web Page” tutorial. Click the Overview button below for more details.

  Overview


Image Width

After selecting an image, its width in pixels is automatically displayed in the width box. You can change this width to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

  Overview


Image Height

After selecting an image, its height in pixels is automatically displayed in the height box. You can change this height to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

  Overview


Border Thickness

This defines the border around the image. When you make an image clickable - that is, insert a URL around an image, an ugly border appears. You can remove this border by setting the Border Width to zero.

  Overview


Image Text

Some users, to save time or bandwidth, don’t display images. For this reason you should always have a meaningful text description accompanying your image. This text description is only displayed when the image is loading, or if a user has turned off images on their browser.

  Overview


File Location

This is the filename of the image you want to insert into your document. Click the [image] button to find the image you want to insert or click the wizard button to start the Insert Image Wizard.

  Overview


Clickable Link

If you want visitors to be able to click to follow a link use this box to define the URL to the new web page.

  Overview


Insert Image Wizard

The Insert Image Wizard provides a simple step by step way of inserting Images into your document. In addition to this however, the wizard can also perform some useful functions, such as automatically creating LOWSRC images or making an image clickable. (i.e., the visitor can click your image to follow a link).

What do you want help on

 How to start the Insert Image Wizard

 Automatically Create a LOWSRC file.

 Make an Image Clickable.

 See an explanation for the different attributes in the Insert Image Wizard.

  Related Topics


How to start the Insert Image Wizard

1	On the Insert Menu click “Image”.

2	In the Insert Image dialog, click the [image] button.


Automatically create a LOWSRC file

A Low Resolution Image is a quick loading picture (i.e. very small file size) that is loaded before your main image is loaded. This way visitors can see general features of your image while it is loading. This option tells HotDog to automatically create, and insert a Low Resolution Image for you.

  To automatically create a LOWSRC image

1	Do one of the following:

•	Right click over the image tag you want to make clickable and then select “Edit Image Tag”

•	On the Insert Menu click on Image

2	In the Insert Image dialog click the [image] button.

3	If necessary, enter any details into the Insert Image Wizard, such as the image file name.

4	Click the “Advanced” button.

5	Click “NEXT” until the last page of the wizard.

6	Check the “Create Low Res. File Automatically box”.

7	Click “NEXT” to insert the image into your document.

  Related Topics


Make an Image Clickable
Making an Image Clickable

When we say that an image is clickable we mean that when a visitor clicks the image, they are taken to a new URL. This is particularly useful if the image has text on it (like an image with the text “Click Here”).

  To add a link to an image

1	Do one of the following:

•	Right click over the image tag you want to make clickable and then select “Edit Image  Tag”

•	On the Insert Menu click on Image

2	In the Insert Image dialog click the [image] button.

3	If necessary, enter any details into the Insert Image Wizard, such as the image file name.

4	Enter the URL of the link that the image is to point to.

5	Click OK to insert the image into your document.

What is the HTML code produced?

All that HotDog is actually doing is wrapping a link tag around an Image tag.

For example;

<IMG SRC=”peter.jpg”>	The tag for an image
<A HREF=”http://www. Sausage.com”>Click Here</A>	The tag for a link. (In this case when a visitor clicks ”Click Here” the browser opens Sausage Software’s WebSite)
The HTML for a clickable image is simply:

<A HREF=”http://www.sausage.com”><IMG SRC=”peter.jpg”></A>

So to summarize, whatever is between the <A…> and the </A> tags becomes clickable.


See an explanation for the different attributes in the Insert Image Wizard
An explanation of the different attributes in the Insert Image Wizard

Each of the boxes in the Insert Image Wizard corresponds to an Image Attribute. For example, when you select a border of 3 pixels, the Insert Image Dialog generates the Image Tag, <IMG>, with the border attribute. For example,

<IMG SRC=”pic.jpg” BORDER=”3”>.

Image Filename

This is the filename of the image you want to insert into your document. Click the [image] button to find the image you want to insert, or click the wizard button to start the Insert Image Wizard.

Clickable Link

If you want visitors to be able to click to follow a link, use this box to define the URL to the new web page.

Text Description

Some users, to save time or bandwidth, don’t display images. For this reason you should always have a meaningful text description accompanying your image. This text description is only displayed when the image is loading, or if a user has turned off images on their browser.

Image Width

After selecting an image, its width in pixels is automatically displayed in the width box. You can change this width to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

Image Height

After selecting an image, its height in pixels is automatically displayed in the height box. You can change this height to whatever value you want. But remember, the file size of the image always remains the same, so if an image is too large, don’t shrink it using the height and width parameter, instead, use a smaller image.

Border Width

This defines the border around the image. When you make an image clickable - that is, insert a URL around an image, an ugly border appears. You can remove this border by setting the Border Width to zero.

Horizontal Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

Vertical Distance from Text

This defines an area around your image. The units are in pixels. Effectively it creates an invisible border around your image. It is useful to prevent text from coming hard up against your images.

Image Alignment

The alignment of an image is relative to the text around it, and the alignment you choose affects how text wraps around your image. Full examples and tutorials are provided in the “Using HTML Alignment Attributes to Layout your Web Page” tutorial.

Low Resolution Image

A Low Resolution Image is a quick loading picture (i.e. very small file size) that is loaded before your main image is loaded. This way visitors can see general features of your image while it is loading. This option tells HotDog to automatically create, and insert a Low Resolution Image for you.

This is by no means a complete listing of all the possible attributes an image can use. For a comprehensive listing, see the HTML Property Sheet.


Inserting Links

URL’s can be referenced in two ways; via absolute Internet links (http://www.sausage.com) or by relative links (art/elise.html). Relative links are used for linking to other documents that form part of your WebSite. Absolute links are used to link to documents that are elsewhere on the Internet (a link to Sausage Software for example). If you are new to HTML, use the Insert Link Wizard for a step by step guide on how to create links in your document.

 To insert a link into your document:

1	On the Insert menu, click ‘HyperLink’.

2	Do one of the following:

•	To enter an absolute Internet link type a URL into the URL box in the Insert Link dialog box.

•	To enter a relative link click the [image] button and using the file picker select the file you want the link to point to.

•	To link to a Target (Internal Anchor), select the Target name from the Named Target List.

•	To open the link in a frame window, enter the name of the Frame Target in the Frame Target box.

What do you want to do?

 Start the Insert Link Dialog.

 Learn about Absolute and Relative Links.

 Learn about Frame Targets.

 Learn about Internal Links.

Notes:

•	To insert relative links into a HotDog document, your document must be saved.

•	If you are using frames you can also specify in which frame you want the URL to open, using the Frame Target box.

•	If you want to create other links (to Gopher or an e-mail link for example), use the Link Wizard. Click the [image] button in the ‘Insert Link’ dialog.

  Related Topics


Starting the Insert Link Dialog

  On the Insert Menu click on “HyperLink”


frmLink context help (and frmInternalLink)


Internal Link Name

If you are using Internal Links (i.e. links to different parts of the same document) each link needs to be uniquely identified. Type the name of the link here.

  Overview


URL

This is the location of the document that the link jumps to. It can be a relative link (i.e. just specifying the file name of the new link) or it can be an absolute link (eg. http://www.sausage.com).

  Overview


Text Description

Each link inserted into your web page has some clickable text associated with it. The textual description is the text that a visitor to your WebSite clicks to follow a link.

  Overview


Frame Target

If you are using frames, you need to not only control where the link points to, but also in which frame window the link opens. Using this box you can enter the frame name.

  Overview


Jump to Named Target

If you have defined any internal targets inside your document they will be listed in this drop down box. Just select the target you want to jump to.

  Overview


Insert Link Wizard

This wizard guides you through the process of inserting links within your document. A URL is a type of link, but should not be mistaken as the only kind of link. As you can see from the list below there are several types. Apart from URL’s the most commonly used link type is the E-mail link. This type of link, when clicked, starts up the visitor’s e-mail program, with a pre-addressed message!

What would you like help on?

 Starting the Insert Link Wizard.

 URL’s, what are they?

 Inserting a link to another web page.

 Inserting an E-mail Link.

 Inserting a link to a File.

 Inserting a link to a FTP site.

 Inserting a link to a Newsgroup.

 Inserting a Telnet Link.

 Inserting a Gopher Link.

  Related Topics


Starting the Insert Link Wizard

1	On the Insert menu, click on “Hyperlink”

2	In the “Insert Link” dialog, click the [image] button.


Inserting a link to another Web Page
Inserting a link to another Web Page (Standard URL)

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “WebSite Link”.

4	Enter the URL details. For example:

Server Name:	www.sausage.com
Server Directory:	images
File Name:	picture.jpg


Inserting a link to a File

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “File Link”.

4	Press the [image] button to open the File Picker.

5	Select the file you want to link to.


Inserting a link to a FTP Site

When a visitor clicks on a FTP link, they begin either downloading a file or jump to a FTP server directory.

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “FTP Link”.

4	Enter the address of the FTP Site you want to link to when a visitor clicks the link.


Inserting an E-mail Link

When a visitor clicks on an E-mail link, an E-mail program starts, inviting them to send a letter to you or whoever you specify.

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”.

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “Email Link”.

4	Enter the Email Address that you want the link to send to.


Inserting a link to a Newsgroup

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”.

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “Newsgroup Link”.

4	Enter the Newsgroup Address that you want opened when a visitor clicks the link.


Inserting a Telnet Link

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “Telnet Link”.

4	Enter the Telnet Address that you want opened when a visitor clicks the link.


Inserting a Gopher Link

  First start the Insert Link Wizard:

1	On the Insert menu, click on “Hyperlink”

2	In the “Insert Link” dialog, click the [image] button.

3	Choose a link type of “Gopher Link”.

4	Enter the Gopher address and arguments you opened and passed when a visitor clicks the link.


Context help for frmLinkWiz


Link Description

Each link inserted into your web page has some clickable text associated with it. The textual description is the text that a visitor to your WebSite clicks to follow a link.

  Overview


Target Frame

If you are using frames, you need to not only control where the link points to, but also in which frame window the link opens. Using this box you can enter the frame name.

  Overview


Link Type

There are many different links you can use on the Internet. By far the most common are URL’s. These links simply link to other HTML documents. However, you can link to newsgroups or even link to a users e-mail client (MAILTO).

  Overview


Port Number

Some link types require a special port number to make a connection to another computer (Server). For FTP connections this port number is set to 21 by default, but occasionally you may need to change it. Usually if this is the case you will be instructed to do so by the site you are connecting to.

  Overview


Target

If you are using frames, you need to not only control where the link points to, but also in which frame window the link opens. Using this box you can enter the frame name.

  Overview


Forms Overview

HTML forms closely resemble their paper counterparts, containing boxes for users to write in. Forms are used when you want complex feedback from visitors to your WebSite. You have probably used forms on other peoples WebSites in the past. They consist of text boxes for you to type in, little check boxes and a few other ‘elements’. An element is the name given to any individual part of a form, such as a text box or submit button.

Every form element has properties or attributes. These attributes control how the form element will look, and what information it will return.

Generally, when a user submits a form, the form is sent to a special program on your server (a CGI script) which interprets the form before sending it on to you. You can however make the form send its output directly to you using the MAILTO command (e.g. <FORM ACTION=”mailto:elise@woodnet.com”>). Forms utilizing the MAILTO command can not be used by visitors using Microsoft Internet Explorer (despite almost universal demands to the contrary!). However, there are solutions to this problem which are explained in discussion and background of forms.

You can insert forms in a graphical environment (through the Visual Table Editor) or as straight text if you are familiar with HTML.

What do you want to do?

 Create a Form using the Forms Wizard.

 Learn more about Forms and how they work.

  Related topics


Insert Forms Wizard

The Form Wizard is designed to help you create forms of your own. Each of the 10 form elements is listed down the left side of the Wizard.

 Click on the form element you want to add to the Design Pad. As you add each new form element, you will be prompted to define the attributes of that element. For example, if you are adding a text box, you will be asked to specify the text box name, size and default text. For a full description of each form element, and what each of the attributes are, click on the Form Elements button below, and select the form element for which you want help.

After designing the layout of your form you need to specify where the completed form results are to be sent. You have a choice of an e-mail address or a URL. If you choose an e-mail address the form results in their raw form are sent to the e-mail address you specify. (Note, this does not work for users of Internet Explorer ). Alternatively, if you choose a URL you need to specify the address of the CGI script that is going to receive and process your form. You will be asked to specify the METHOD , URL (or action) and the ENCTYPE .

What do you want to do?

 Start the Form Wizard.

 Learn about each of the Form Elements.

  Related Topics


Start the Insert Forms Wizard

1	On the Insert menu, select the “Form Items” submenu.

2	In the Form Items submenu, select “Form Wizard”.


Context Help for frmFormWiz


Text Box Name
Text Box - Name

Each form element needs a name that uniquely identifies it. For example, a text box asking the visitor’s name might be called “TextBox_Name”. Remember - the names of form elements can not contain spaces.

  Overview


Text Box Size
Text Box - Size

Specifies the size of the text box in characters. As such, you can not perfectly define how large the text box is. Hopefully, later additions to HTML will allow for pixel definitions for the height and width of a text box.

  Overview


Text Box Max number of characters
Text Box - Maximum number of characters

Places a limit to the number of characters a visitor can enter into a text box.

  Overview


Text Box Default Text to Appear
Text Box  - Default Text to Appear

When a visitor first views your text box, it can already contain some text. For example, a text box might contain the text “Enter name here…”

  Overview


Image Element Name
Image Element - Name

Each form element needs a name that uniquely identifies it. For example, an image used as a submit button might be called “Img_Submit”. Remember - the names of form elements can not contain spaces.

  Overview


Image Element Filename

This is the image file that will be used as the submit button. Click the [image] button to choose an image.

  Overview


Hidden Element Name

Each form element needs a name that uniquely identifies it. For example, a hidden element might be called “hddn”. Remember - the names of form elements can not contain spaces.

  Overview


Hidden Element Default Text

This is the default text that will be returned by the Hidden element when a visitor submits the form. The visitor does not see this text, and it is for your own use only. For example, you might use the default text to store information about the form, such as when you last updated it etc.

  Overview


Password Name

Each form element needs a name that uniquely identifies it. For example, a password element might be called “pswrd_username”. Remember - the names of form elements can not contain spaces.

  Overview


Password Element Size

This is the size of the password form in characters.

  Overview


Password Max number of characters

The maximum number of characters a visitor can enter into the password field.

  Overview


Password Element Default Value to Return

A password element can already have some text in it. (Of course the text is displayed as asterisks.)

  Overview


Submit Name

Each form element needs a name that uniquely identifies it. For example, the submit button might be called “submit_btn”. Remember - the names of form elements can not contain spaces.

  Overview


Submit Caption

You can define your own caption for the submit button. Typical values are “Send” or “Submit”

  Overview


Reset Caption

You can define the caption of the reset button on your form. Typical values are “Reset” or “Clear Form”

  Overview


Design Pad

This pad is used to create your form. Drag and drop form elements from the left onto the design pad to create your form.

  Overview


Send Form Details to email address

Enter the email address for where you want the form results sent. Note, currently sending the form results by email only works under Netscape 3 and up. For reasons of their own, Microsoft has never made forms work correctly in their browsers.

  Overview


Send form details to URL

Form results are usually sent to a CGI Script. This box should contain the URL of the CGI script. Writing CGI scripts is beyond the scope of HotDog, however, you may well find your ISP has some standard CGI scripts you can use.

  Overview


Email Address

This is the email address where the form submissions are sent. Usually it would be your email address.

  Overview


METHOD

There are two methods for sending form data, GET and POST. The POST method sends the form data to the URL in the ACTION attribute in 2 steps. The first step makes contact with the server, the second sends the data. The GET method sends the data all in one go. In terms of usability they are very similar. If you are not using CGI and just want the form data e-mailed to you, use the POST method.


ACTION

The ACTION tag specifies the URL of the computer that will be processing the data of the form. Usually this will be the CGI bin on a server.

For instance, a typical form may look like:

<FORM ACTION=”http://www.tmbg.com/cgi-bin/survey”>

Here the data from the form is sent to the server www.tmbg.com, where the program ‘survey’ located in the cgi-bin (a directory on the server) processes the form data.


ENCTYPE

When sending the form data to the URL specified in the ACTION attribute, the browser encodes the data. The ENCTYPE attributes determines what this encoding will be. Well, that’s the theory. At the moment, only Netscape can use 2 types of encoding. (And if you use this encoding, only Netscape users will be able to use your form.)

The two types of encoding are:

application/x-www-form-urlencoded	The default, you do not need to specify it.
Multipart/form-data	Only read by Netscape and used to attach files to a form.


Form element, Check Box
Form Element: Check Box

Use

Check Boxes are best used when the user is presented with a yes/no choice. Each check box has its own name as specified by the NAME property. You should make this name meaningful so you can decipher the user's response.

Properties

NAME=” “	Required	The name of the check box.
VALUE=” ”	Optional	The default value is ‘on’ if the box is checked. You can change this value by entering your own.
CHECKED	Optional	Makes the check box checked by default.

Example HTML

<INPUT TYPE=”checkbox” NAME=”Own_Computer?” CHECKED> Do you own a computer?

<INPUT TYPE=”checkbox” NAME=”WIN_95”> Do you use Windows 95?

Note, for this example to work it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, File
Form Element: File

Use

The Input File element allows a visitor to attach files to the form they are submitting. Presently neither Netscape or MS Internet Explorer support the File element.

Properties

NAME=” “	Required	The name of the File element.
ACCEPT=” “	Required	The type(s) of files that will be accepted as attachments.
Note, for this example to work it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Hidden
Form Element: Hidden

Use

The Hidden element is used by the form creator (you) rather than the visitor. The hidden text box is not visible on the visitor’s browser. When a visitor submits their form, all the information in the VALUE property of the hidden element is also submitted with it. This information usually consists of notes to yourself such as the build of your form, what the form is, where you put it etc.

Properties

NAME=” “	Required	The name of the hidden text box.
VALUE=” “	Optional	The data or information that is submitted with the form.

Example

<INPUT TYPE=HIDDEN NAME=”form_information” VALUE=”Tomas Norton Survey. Form created on 8/8/97”>

Note, for this example to work it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Image
Form Element: Image

Use

The Image element is not commonly used. Essentially it is a submit button that uses a graphic instead of text. The button, as well as submitting all the data in the form, returns the mouse’s position on the graphic when clicked. (Returns 0,0 if the visitor clicks on the top left of the graphic, and the horizontal size and vertical size of the image if clicked on the bottom right of the graphic)

Properties

NAME=” “	Optional	The name of the submit button.
SRC=” “	Required	The location of the Image to be used as the submit button. The syntax is identical to the IMG SRC tag. (c.f. Absolute and Relative References )

Example

<INPUT TYPE="image"  NAME="image_submit" SRC=”graphics/TMBG.gif”>

Note, for this example to work it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Password
Form Element: Password

Use

Password boxes are just like text entry boxes, but any characters the user inputs are represented as asterisks. They are used for the entry of confidential information such as credit card numbers, wages or passwords.

Properties

NAME=” “	Required	The name of the password box.
SIZE=” “	Optional	Specifies the size of form element in characters.
MAXLENGTH=” “	Optional	Specifies the maximum amount of characters a visitor can enter into the password box.
VALUE=” “	Optional	Specify a default password (for example, Visitor).

Example

Please enter your password below:<br>

<INPUT TYPE="password"  NAME="password_box" SIZE=8 MAXLENGTH="8">

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Radio Button
Form Element: Radio Button

Use

Radio buttons are the little circles that click in forms [image]. They are best utilized when you want to make the user  make one selection only from a multitude of choices. (c.f. Check Boxes )

Properties

NAME	Required	As the visitor can only select one choice from a group of radio buttons, all radio buttons in the same group must have the same Name. (See example below).
VALUE	Required	The text that will be returned to you when the user selects a choice. Clearly this text should be different for every radio button.
CHECKED	Optional	Checks one of the radio buttons by default.

Example

Have you read any books by Jonathan Dee? <BR>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="Yes">Yes<br>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="No">No<br>

<br>

Would you recognize the 'yellow sign'? <BR>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="Yes">Yes<br>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="No" CHECKED>No<br>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Range
Form Element: Range

Use

The Range element allows the user to enter a number between the ranges specified by the MAX and MIN properties. If you use real numbers in the MIN or MAX fields, the user can also enter real numbers. Presently neither Netscape or MS Internet Explorer support the Range element.

Properties

NAME=” “	Required	The name of the Range element.
MIN=” “	Optional	The minimum value a visitor can enter into the range box.
MAX=” “	Optional	The maximum value a visitor can enter into the range box.
VALUE=” “	Optional	This is the default number in the range box and should between the numbers you specified for the MAX and MIN values. (If any)

Example

<INPUT TYPE=RANGE NAME=”max_min_box” MIN=”0” MAX=”10” VALUE=”5”>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Reset
Form Element: Reset

Use

The Reset button returns every element in your form to its default value.

Properties

VALUE=” “	Optional	By default, the text on the Reset button reads ‘Reset’. However, this text can be changed by using the VALUE property.

Example

<INPUT TYPE=”reset” VALUE=”Clear All”>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Scribble
Form Element: Scribble

Use

The Scribble form element lets you draw, using a mouse, on a graphic. Presently neither Netscape or MS Internet Explorer support the Scribble element.

Properties

NAME	Required	The name of the scribble area.
SRC	Required	The URL of the image to be drawn on.
VALUE	Optional	This is the text that is displayed if the images or scribbling are not supported by the browser.

Example

<INPUT TYPE=SCRIBBLE NAME=”scribble” SRC=”graphics\picture.gif” VALUE=”Get a better browser”>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Submit
Form Element: Submit

Use

The Submit button allows a visitor to send their form choices to you (as you defined in the FORM METHOD properties section).

Properties

NAME=” “	Optional	When the user submits the form, no message usually accompanies the data. However, using the name option, the name of the submit button can also be included in the submitted data. See example below.
VALUE=” “	Optional	By default, the text on the Submit button reads ‘Submit’. However, this text can be changed by using the VALUE property.

Example

What did you think of my WebSite?

<INPUT TYPE=”submit” NAME=”Loved_it” VALUE=”Loved it”>

<INPUT TYPE=”submit” NAME=”Hated_it” VALUE=”Hated it”>

This form returns all the other form data, as well as which submit button was used to submit the form.

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Text
Form Element: Text

Use

A Text box allows a visitor to enter a single line of text into a form and then presumably submit it to you.

Properties

NAME=” “	Required	The name of the text box.
SIZE=” “	Optional	Specifies the size of form element in characters.
MAXLENGTH=” “	Optional	Specifies the maximum amount of characters a visitor can enter into the text box.
VALUE=” “	Optional	Specifies default text to appear in the text box.

Example

<INPUT TYPE=”text” NAME=”namebox” VALUE=”Enter your name here…” SIZE=”40” MAXLENGTH=”25”>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Select
Form Element: Select

Use

The select element is used for menus. There are two different menus; scrollable menus and drop down lists (See below). Each item in a menu is called an option and each option has its own properties.

Properties

MULTIPLE	Optional	Defines a scrollable list.
-  SIZE=” “	Optional	If you are using a scrollable list, the size property defines how many options are displayed.

Option Properties

SELECTED	Optional	Displays the default option.
VALUE=” “	Optional	Instead of returning the text after the Option tag, the VALUE text is returned.

Example

Scrollable Menu

Have you read any of the following books?<BR>

<SELECT NAME=”Book_Read” MULTIPLE SIZE=”5”>

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION> Journal of Tomas Norton

<OPTION> The Magus

<OPTION> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

Drop Down List

Which book was your favorite?<BR>

<SELECT NAME=”Favorite_Book”>

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION SELECTED> Journal of Tomas Norton

<OPTION> The Magus

<OPTION VALUE=”Abramelin”> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog.

  Other Form Elements	 Related Topics


Form element, Text Area
Form Element: Text Area

Use

Text Areas are used when you want extended feed-back from a visitor. Otherwise they are just like Text boxes.

Properties

NAME=” “	Required	The name of the text box.
ROWS=” “	Required	The number of rows of text the text area spans.
COLS=” “	Required	The number of characters the text area spans.
Default text	Optional	Displays text in the text box area. Note: This option is not standard, see below for an example.
Example

<TEXTAREA NAME=”thoughts” ROWS=”4” COLS=”40”> Please enter your thoughts here…</TEXTAREA>

Note, for this example to work, it must be inside form tags (<FORM …>   … </FORM>). The entire form code, including all the examples, is ready for you to paste into HotDog

  Other Form Elements	  Related Topics


Inserting Form Elements directly into HotDog.

xxxx- this topic needed.


More context help, this time for the popup form dialogs, eg frmCheckBox


Check Box Name

Each form element needs a name that uniquely identifies it. For example, a check box asking visitors if they want to be sent email might be called “chk_bx_email”. Remember - the names of form elements can not contain spaces.

  Overview


Default Value to Return to Check Box
Default Value to Return

If a visitor checks your check box and submits your form, the default return value is ‘on’. You can define your own, more meaningful, message using the Default Value to Return box. For example, entering “Clicked_On” would result in the message “Clicked_On” being sent if a visitor checked your check box and submitted your form.

  Overview


Checked?
Checked by Default

When a visitor first views your check box, it can be by default on or off.

  Overview


Name

Each Form Element needs a name that uniquely identifies it. For example, a Text Area asking a visitor for comments might be called “TextArea_Name”. Remember - the names of Form Elements can not contain spaces.

  Overview


Rows

The height of a Text Area is  defined by the number of rows of text it spans. As such, you can not perfectly define how high the Text Area is. Hopefully, later additions to HTML will allow for pixel definitions for the height and width of a Text Area.

  Overview


Number of Characters Long

Specifies the size of the Text Area’s width in characters. As such, you can not perfectly define how wide the Text Area is. Hopefully, later additions to HTML will allow for pixel definitions for the height and width of a Text Area.

  Overview


Default Text to Appear

When a visitor first views your Text Area, it can already contain some text. For example, a Text Area might contain the text “Please enter your comments here…”

  Overview


Name

When the user submits the form, no message usually accompanies the data. However, using the name option, the name of the submit button can also be included in the submitted data.

  Overview


Caption

By default, the text on the Submit button reads ‘Submit’. However, this text can be changed by using this text box.

  Overview


Caption

By default, the text on the Reset button reads ‘Reset’. However, this text can be changed by using this text box.

  Overview


Name

As the visitor can only select one choice from a group of radio buttons, all radio buttons in the same group must have the same Name.

  Overview


Default Value to Return

The text that will be returned to you when the user selects a choice. Note: this text should be different for every radio button.

  Overview


Selected

Checks one of the radio buttons by default.

  Overview


Name

Each form element needs a name that uniquely identifies it. For example, a password box asking for a visitor’s password might be called “PW_PASSWORD”. Remember - the names of form elements can not contain spaces.

  Overview


Element Size

Specifies the size of the Password Box in characters. As such, you can not perfectly define how large the text box is. Hopefully, later additions to HTML will allow for pixel definitions for the height and width of a text box.

  Overview


Minimum Number of Characters
Maximum Number of Characters

Places a limit to the number of characters a visitor can enter into a password box.

  Overview


Default Value to Return

Specify a default password (for example, the password for a visitor might already be entered into the password box).

  Overview


Name

Each form element needs a name that uniquely identifies it. For example, a list box might be called “LB_BOOKLIST”. Remember - the names of form elements can not contain spaces.

  Overview


Number of Items to Display

If you are creating a scrollable list (as opposed to a drop down list) then you define how many elements are displayed. For example, if you choose ‘three’ then your scrollable list will be three lines high.

  Overview


Allow Multiple Selections

There are two different menus; scrollable menus and drop down lists. A drop down list does not allow multiple selections while a scrollable menu list does.

  Overview


List

Value	Text	Selected
Fruit	Orange	--
Fruit	Grapes	--
Fruit	Apple	--
--	Bread	--
--	Carrots	--
In the list above, if a user selected any of the fruits from the list and submitted your form, the form would indicate that they choose “Fruit” and not Orange, Grapes or Apple’s. If the user selected “Bread” then, as there is no “Value” field defined, the form would return “Bread”.

The Selected field indicates which of the text items is selected by default when the visitor first views the form.

  Overview


Name

Each form element needs a name that uniquely identifies it. For example, an Image Element might be called “IE_PIC”. Remember - the names of form elements can not contain spaces.

  Overview


File

The location of the Image to be used as the submit button. The syntax is identical to the IMG SRC tag.

  Overview


Image Preview

This window displays what image you currently have selected for the Image Element.

  Overview


Name

Each form element needs a name that uniquely identifies it. For example, a Hidden Element might be called “H_FRMINFO”. Remember - the names of form elements can not contain spaces.

  Overview


Default Value to Return

When a visitor submits their form, all the information in the Default Value box is also submitted with it. This information usually consists of notes to yourself such as the build of your form, what the form is about, where the form resides on the Internet etc.

  Overview


Name

Each form element needs a name that uniquely identifies it. For example, a text box asking the visitor’s name might be called “TextBox_Name”. Remember - the names of form elements can not contain spaces.

  Overview


Text Element Size

Specifies the size of the text box in characters. As such, you can not perfectly define how large the text box is. Hopefully, later additions to HTML will allow for pixel definitions for the height and width of a text box.

  Overview


Maximum number of Characters

Places a limit to the number of characters a visitor can enter into a text box.

  Overview


Default Text To Appear

When a visitor first views your text box, it can already contain some text. For example, a text box might contain the text “Enter name here…”

  Overview


Table Overview

If you look at the source of most web pages on the Internet today, they will contain tables. This is probably due to the way browsers render HTML. When a browser renders HTML code it positions each object (block of text or image) relative to the other. The advantage of this way of positioning is that content can be fitted to any browser page size. The disadvantage is that the layout of the web page you design on your computer can look very different on someone else’s machine. Using tables you can, to some degree, force a browser to display your page content the way you want it to be displayed. If a table is to big for a browser window, you force the window to display horizontal scroll bars indicating that there is more content to be displayed rather than the browser moving the images to a new position.

Because of their common use, tables feature heavily in HotDog. There are 3 ways to create tables: the Quick Table, the Table Wizard and the Visual Table Editor .

What do you want to do?

 Create a Table using the Quick Table function.

 Create a Table using the Table Wizard.

 Create and Edit a Table using the Table Editor SuperTool.

 Using the HTML Property Sheet to edit the properties of the Table Tag.

Note: One disadvantage in using tables is that all images in a table must be fully loaded before they can be displayed unless you are very careful to include each image's height and width in their tag definition.

  Related Topics


 Begin a tutorial on Tables.


Installing SuperToolz
Installing SuperToolz and Upgrading HotDog

The AutoDownloader helps you keep in contact with Sausage Software and lets us give you the latest updates on the software we make. When you start the AutoDownloader, your default Internet Browser is started, loading our Upgrades and SuperToolz web pages. From these web pages, you can upgrade HotDog (if available), install our SuperToolz and in addition, you can install any of our partner applications (LinkBot, mBed, Paint Shop Pro).

What do you want to do?

 Start the AutoDownloader.

 Run a SuperTool already Installed on your Computer.

Note:

The URL to the Sausage Software’s Upgrades and SuperToolz page is: http://www.sausage.com/toolz/


How to start a SuperToolz already installed on your computer
Start the AutoDownloader

  In the SuperToolz menu, click “AutoDownload SuperToolz”.


How to start a SuperToolz already installed on your computer
Start a SuperTool already installed on your Computer

Do one of the following:

•	In the SuperToolz menu, click on the SuperToolz you want to run.

•	Open the SuperToolz Resource Manager:

1	In the View Menu, select the “Resource Manager” sub-menu.

2	In the Resource Manager sub-menu, click “SuperToolz”.

3	Double click on the SuperTool you want to run.


Install Updates to HotDog


Install LinkBot, mBed Interactor or Paint Shop Pro


Install HotDog Accessories


Install or update SuperToolz


 First start the AutoDownloader:

1	On the SuperToolz menu, click “Download SuperToolz”.

2	In the AutoDownloader, click the “HotDog” tab.

3	Check the HotDog update you want to install.

4	Click “Install”.

You may already have the latest version of HotDog installed. To check which version of HotDog you have installed:

1	Inside HotDog click on Help menu.

Select “About HotDog”.

 First start the AutoDownloader:

1	On the SuperToolz menu, click “Download SuperToolz”.

2	In the AutoDownloader, click the “HotDog” tab.

3	Check the application(s) you want to install.

Click “Install”.

 First start the AutoDownloader:

1	On the SuperToolz menu, click “Download SuperToolz”.

2	In the AutoDownloader, click the “HotDog Accessories” tab.

3	Check the accessory(s) you want to install.

Click “Install”.

On the SuperToolz menu, click “Download SuperToolz”.

 First start the AutoDownloader:

1	On the SuperToolz menu, click “Download SuperToolz”.

2	In the AutoDownloader, click the “SuperToolz” tab.

3	Check the SuperToolz(s) you want to install.

4	Click “Install”.

The AutoDownloader helps you keep in contact with Sausage Software and lets us give you the latest updates on the software we make. When you start the AutoDownloader, all the latest information about Supertoolz and other programs is downloaded to your computer where the Automatic Downloader determines if you have the latest versions of our tools on your computer and may prompt you to download a newer version (for free!). In addition, you can install any of our partner applications (LinkBot, mBed, Paint Shop Pro) using the AutoDownloader.

What do you want to do?

 Start the AutoDownloader.

 Install Updates to HotDog.

 Install LinkBot, mBed Interactor or Paint Shop Pro.

 Install HotDog Accessories (such as dictionaries etc.).

 Install or update SuperToolz.


LinkBot

Linkbot is an award-winning suite of site management utilities that helps Webmasters maintain, test and organize their sites. Linkbot contains all the tools you need to maintain an error-free site. Linkbot can:

1	Locate broken links, missing images and stale content.

2	Identify unused (orphaned) files.

3	Find large pages with slow download times.

4	Visualize the structure and organization of the site.

5	Isolate subsections of the site using customizable filters.

6	Schedule Web site analyses to automate routine maintenance.


mBed Interactor

mBED Interactor is a drag and drop authoring tool for adding interactive multimedia components (called mbedlets) to your Web site. To optimize the interactive multimedia for your target audience, Interactor provides three different feature sets- a Dynamic HTML feature set, a Java feature set, and a complete mBED Interactor feature set. Using mBED you can create advanced effects on your web page including movement, visual changes, and sound. The mBED players can interact with each other and with the user.


Paint Shop Pro

Paint Shop Pro is a full-featured painting and image manipulation program. Powerful features include multiple paint brushes with adjustable attributes and textures, built-in special effects, powerful area selection options, photo cloning and retouching tools, full-featured image enhancement tools including third-party filter support, full color adjustment support, an integrated image browser that allows you to visually search directories for images, advanced World Wide Web graphic file format support, a built-in screen capture utility, batch file format conversion and TWAIN scanner support.  Paint Shop Pro supports more than 30 file formats, making it one of the most versatile graphic manipulation programs available.


Using the HTML Property Sheet to edit the properties of the Table Tag

  Open a new document:

1	On the Open New File window, click “New”.

2	In the New File window, click “OK”.

  Display the HTML Property Sheet:

1	On the View menu, select the “Resource Manager” submenu.

2	In the “Resource Manager” submenu, click on “HTML Property Sheet”.

Type “<TAB” into your document. Notice how the HTML Property sheet continually updates as you type. At this point, the HTML Property sheet has narrowed down the possible tags you are going to type to the “table” tag.

  To quickly enter the remaining text into HotDog:

1	Press the CTRL key and the ENTER key to jump to the Property Sheet.

2	Press ENTER to insert the TABLE tag into your document.

The text on your screen should be:

<TABLE></TABLE>

The cursor is in the <TABLE> tag.

1	Now using the HTML Property Sheet, enter some attributes:

2	Press CTRL + ENTER to jump to the Property Sheet.

3	In the Property Sheet, you can use the arrow keys to navigate through the different attributes of the table tag.

4	Use the arrow keys to navigate to the “Border” attribute.

5	Enter a value of 2 into the Border attribute.

6	Use the arrow keys to navigate to the next attribute you want to add to the table.

Notice how the Border tag is automatically inserted into your document.

You can use the technique to insert and modify any tags you want added to a document. One of the advantages is that frequently attributes are listed that you were not aware existed. By quick and simple experimentation you can fine tune the presentation of your web page.


Create a Table using the Table Wizard.

The Table Wizard provides a convenient way of creating tables, especially if you are not familiar with HTML. The Insert Table wizard guides you through the process step by step, with diagrams and pictures helping you every step of the way. After using the Table Wizard you may want to use the Visual Table Editor to modify your table.

What do you want to do?

 Start the Table Wizard.

 Select a special table layout.

  Related Topics


Starting the Table Wizard

  On the Insert Menu, click on “Table”.


Selecting a special table layout

  First start the Table Wizard

•	On the Insert Menu, click on “Table”.

Then select the table layout most appropriate to your needs. Typical table layouts are included, such as calendars, balance sheets and image presentation.


Table Wizard Context Help frmTableWizard


Insert Commented Text
Insert as Commented Text

This option makes any table you create have the number of the row and column of each cell printed in the table HTML The text is ‘commented’ that is, it can’t be seen by visitors viewing your table. The commented text will not appear in Rover either.

  Overview


Insert Plain Text
Insert as Plain Text

This option makes any table you create have the number of the row and column of each cell printed in the table HTML  The text is plain text, that is, if you preview your table you will see the row and column of each cell listed in the table.

  Overview


Cell Spacing

Cell spacing is the spacing between cells. In other words, it will make the frame inside the table bigger.

  Overview


Cell Padding

Cell padding is the spacing inside a cell. In other words, it places a buffer zone of space (in pixels) around any object in the cell.

  Overview


Border Thickness

Defines the thickness of the tables border in pixels. Typically, 0-2 is a good value.

  Overview


Restore

If you want to return the Table’s colors to their default values, click the “Restore” button.

  Overview


Units

Select from pixels or percent. Pixels units define the minimum width or height of the table exactly. If you select a width of 500 pixels and assuming the content of your table is less than 500 pixels in width, then the table will always be drawn as 500 pixels wide. If you select the table’s width or height as a percentage, the percentage is of the visitors browsers width or height. Usually percentage widths are used to make a table’s width always span the entire page (i.e., width = 100%).

  Overview


Minimum Width of Table

Defines the minimum width of a table. This means that if you insert an object (e.g., image) larger than the minimum width of the table, the table will resize to fit it.

  Overview


Minimum Height of Table

Defines the minimum height of a table. This means that if insert an object (e.g., image) larger than the minimum height of the table, the table will resize to fit it.

  Overview


Table Alignment

Controls the horizontal alignment of the table:

Left	Table is rendered flush with the left margin.
Center	Table is rendered centered between the margins.
Right	Table is rendered flush with the right margin.
  Overview


Classic Table

The Classic Table is used to create simple tables.

  Overview


Toolbar Table

Frequently you will want a to insert images and text down the left border of a web page. The Toolbar table has been designed for this purpose.

  Overview


Calendar Table

Use the Calendar Table if you want to insert a table into your document that displays a calendar of events.

  Overview


Presentation Table

The Presentation Table is used to display images with a heading and paragraph describing them.

  Overview


Header and Footer Table

Use the Header and Footer Table when you want to place headings into the header and footer of a web page. Use frames to make a more advanced web page that lets you put whole web pages between the header and footer.

  Overview


Margin Table

Use the Margin Table when you want the main content of your web page offset from the left and right side of the browser margin.

  Overview


Create a Table using the Quick Table function

1	On the Insert Toolbar, click and hold the left mouse button over the [image] button.

2	Drag out the table window until the table is the size you want to insert.

  Related Topics


Dynamic HTML Animation
Dynamic HTML Animate

Dynamic HTML (DHTML) a newer and more powerful extension of HTML. Supported by only the latest browsers (Netscape 4 and Microsoft Internet Explorer 4) DHTML lets you add moving objects to your web page. In this case, an object (or entity) can be some text, an image or even a table.

  Inserting Dynamic HTML effects into your document is easy:

1	Highlight the object you want to insert.

2	On the Format Menu, click on Dynamic HTML Animate.

3	Select the animation effect.

Note:

Rover (unless you use MS Internet Explorer 4) will not display your animations. You will have to preview them with an external browser.


Context help for frmAnimation


Object Name

Each “Object” (table, image, block of text etc.) that you want to animate must have a unique name. This name however is not visible to visitors to your WebSite, so it can be any word you like. Note, the name can have no spaces.

  Overview


Object to Animate

An “Object” is a thing (for want of a better word) that appears on a web page. An Object could be an image, a block of text or a table. The object contained within this window will the be the object that is animated.

  Overview


Animation Type

Each object can be animated in a variety of ways. Select the Animation type you want from the drop down list.

  Overview


Adding Commented Text to a web page

Any text in the that appears in the comment window will become commented when inserted into a document. Commented text is not read or displayed by browsers. For example, the commented image tag below would not be displayed by a browser. However, some search engines still used commented text as a source for search terms.

<!-- <IMG SRC=”pic.jpg”> --> would not be rendered.


frmComment context help


Adding Comments

Any text in the that appears in the comment window will become commented when inserted into a document. Commented text is not read or displayed by browsers. For example, the commented image tag below would not be displayed by a browser. However, some search engines still used commented text as a source for search terms.

<!-- <IMG SRC=”pic.jpg”> --> would not be rendered.


Customize Toolbars
Customizing Toolbars

Toolbars are one of the quickest ways you can access functionality in HotDog. Because of their importance, HotDog’s toolbars are fully customizable, you can add HTML tags to them (i.e., a single click to insert the IMG tag) as well as defining and adding your own Macros.

The Insert Toolbar.

What do you want help on?

 Starting the Toolbar Manager.

 Deleting a Toolbar.

 Creating a new Toolbar.

 Adding and removing functions to and from a Toolbar.

 Adding HTML Tags to a Toolbar.

 Adding Macro’s to a Toolbar.


Starting the Toolbar Manager

  To start the Toolbar Manager:

1	On the View Menu select the Toolbars submenu.

2	On the Toolbars submenu, click Customize Toolbars.


Deleting a Toolbar

  First start the Toolbar Manager:

1	On the View Menu select the Toolbars submenu.

2	On the Toolbars submenu, click Customize Toolbars.

3	In the Toolbars window click on the Toolbar you want to delete.

4	Click Delete.


Adding a Toolbar

  First start the Toolbar Manager:

1	On the View Menu select the Toolbars submenu.

2	On the Toolbars submenu, click Customize Toolbars.

3	In the Toolbars window, click ‘New’.

4	Enter a name for the new Toolbar.

5	Start dragging buttons onto the Toolbar.


Adding and removing functions to and from a Toolbar

  First start the Toolbar Manager:

1	On the View Menu select the Toolbars submenu.

2	On the Toolbars submenu, click Customize Toolbars.

To add a function to a Toolbar:

1	In the Toolbars window, click on the Toolbar you want to edit.

2	In the Buttons window select the ‘Functionality’ tab.

3	Drag any buttons from the functionality list to your Toolbar.

Note:

Any button can only exist on one Toolbar at any time. For example, Say you have the “New File” button on the ‘Standard’ Toolbar. If you create your own Toolbar and want to add the “New File” button to it, HotDog will ask you if you want to remove the “New File” button from the “Standard” Toolbar and put it on your new Toolbar.

Removing a button from a Toolbar.

To remove a function from a Toolbar

1	In the Toolbars window, click on the Toolbar you want to edit.

2	On the Toolbar, right click over the button you want to remove,

      Select ‘Remove Button’.


Adding HTML Tags to Toolbar

  First start the Toolbar Manager:

1	On the View Menu select the Toolbars submenu.

2	On the Toolbars submenu, click Customize Toolbars.

To add HTML Tags to a Toolbar:

1	In the Toolbars window, click on the Toolbar you want to add an HTML Tag to.

2	In the Buttons window select the ‘Tags’ tab.

3	Drag any HTML tags you want to add on to your Toolbar.


Adding MACRO's to a Toolbar
Adding Macros to a Toolbar

  First start the Toolbar Manager:

1	On the View Menu select the Toolbars submenu.

2	On the Toolbars submenu, click Customize Toolbars.

To add Macros to a Toolbar:

1	In the Toolbars window, click on the Toolbar you want to add Macros to.

2	In the Buttons window select the ‘Macros’ tab.

3	Drag any Macros you want to add on to your Toolbar.


Customize Toolbars frmCustomize


Selected Toolbar

The Toolbar displayed here is the Toolbar currently being modified. Drag and drop buttons from the “Buttons” list to add new buttons to it. To change the Toolbar being modified, click on Toolbar listed in the “Toolbars” list.

  Overview


New Toolbar

To create a completely new Toolbar, click the “New” button. To ensure that your Toolbar is displayed when you exit the Toolbar Manager, make sure the checkbox next to your new Toolbar is ticked.

  Overview


Delete Toolbar

To delete a Toolbar from the Toolbar list, click on the Toolbar you want to delete from the Toolbars list and then click “Delete”. You can restore the default Toolbars by clicking on the View menu, selecting Toolbars and then clicking on Restore Default Settings. Note, this command will not restore any Toolbars you created.

  Overview


Toolbar List

This list contains all the Toolbars available. To display a Toolbar when HotDog is started, make sure the checkbox next to the Toolbar is checked. Click on the Toolbar you want to modify. It will be displayed as the “Selected Toolbar” above.

  Overview


Functions

The Function List contains icons for all the functions that HotDog can perform, such as Opening New Documents, Inserting Images etc. To place a function on to a Toolbar, drag it from the function list to the “Selected Toolbar” above.

  Overview


Tags

The Tag List contains all the HTML tags that HotDog recognizes. For convenience, you can places these tags onto Toolbars. To place a tag on to a Toolbar, drag it from the tags list to the “Selected Toolbar” above.

  Overview


Macros

The Macro List contains all the Macros you have defined in the Macro Editor (View menu, Resource Manager, Macro Editor). To place a macro on to a Toolbar, drag it from the Macro List to the “Selected Toolbar” above.

  Overview


dloadfm context help


Don't show message again

If you check this checkbox this window will never be displayed again.


frmStyleIntro Context help


Don't show me this screen again

If you check this checkbox this window will never be displayed again.


frmGreeting Context Help


Don't Show this window again

If you check this checkbox this window will never be displayed again.


Creating Numbered and Bulleted Lists

The Create List Dialog gives you an easy way to create bulleted and numbered lists. Lists are used to display information or steps in a clear and concise manner. For example:

Choose one of the following: • Choice 1 • Choice 2 • Choice 3 • Choice 4	Follow the steps below: 1 Step 1 2 Step 2 3 Step 3 4 Step 4

What do you want to do?

 Start the Create List Dialog.

 Create a numbered list.

 Create a bulleted list.

  Related Topics


Opening the Create List Dialog

 On the Insert Menu click on “List”.


Creating a Numbered List

To begin, start the Insert List Dialog:

 On the Insert Menu click on “List”.

To add a “term” to list:

 Type each item in your list into the Text Box, pressing ENTER or RETURN after each item.

Headings

Use a heading to add a title to your list.


Creating a Bulleted List

To begin, start the Insert List Dialog:

 On the Insert Menu click on “List”.

To add a “term” to list:

 Type each item in your list into the Text Box, pressing ENTER or RETURN after each item.

Headings

Use a heading to add a title to your list.


frmDocList Context Help


List Type

Choose the list style you want to use for your list.

Bulleted	Numbered	None
• Item A • Item B	1. Item A 2. Item B	Item A Item B
  Overview


Numbering Style

You can number your list in several different ways. Select the numbering system you want to use from the Numbering Style List.

  Overview


Heading

The Heading appears at the top of the list.

  Overview


Begin Numbering List At

Rather than beginning your list count at ‘0’ (which is the default) you can specify that your list begin at a different number.

  Overview


List Terms

Enter all the different terms (i.e., items in the list) into the List Box. Press ENTER after defining each item.

  Overview


Definition Lists

Definition lists are used when you want to define a term. For example:

Laudamus

    First Cong. Verb, we praise

Here the “Laudamus”  is the Term and “First Conj. Verb, we praise” is the Definition.

What do you want to do?

 Open the Create Definition List Dialog.

 Create a definition list.

  Related Topics


Open the Create Definition List Dialog

  On the Insert menu click on Definition List


Create a definition list

First open the Definition List Dialog:

  On the Insert menu click on Definition List

  To add a heading to a list, enter the heading into the Heading box.

  To add a term to a list:

1	Click “Add Term”.

2	In the Definition Term Window type the term to be added.

  To add a definition to each term:

1	Click on the term you want to add a definition to.

2	In the “Definitions For” window, type a definition.


frmDefList context help


Heading

This heading appears at the top of your list. For example:

My Heading

Term1

   defn for Term1

  Overview


Add Term

A term is an item in a list. It may or may not be followed by a definition. Click the “Add Term” button to add a term to a list.

  Overview


Remove Term

A term is an item in a list. To remove a term (and its definition) click on the term you want to delete and then click the “Delete Term” button.

  Overview


Definition Term

A Definition Term is an item in a list. It may not or may not have an corresponding definition. For example:

Defn Term1

      Corresponding Definition

  Overview


Definitions For
Definitions For Terms

A Definition Term is an item in a list. Each term may also have a corresponding definition. This definition is defined in the “Definitions” window.

  Overview


HotDog Editor

Each document you open in HotDog is opened and edited using the HotDog editor. Usually editors are only given brief consideration by users because by all outward appearances they look the same. The HotDog editor is deceptively powerful. As well as the basic functions (WRA etc.) listed at the bottom of each document, the HotDog editor can also collapse text and more.

Collapsible Text

The HotDog editor can collapse text that you have finished editing. For example after you have completed a three page table and are working on a different part of your web page - there is no need to continuously re-scroll over your completed work. HotDog lets you simply collapse it, thus reducing the entire table to one line of code and making editing a lot easier.

 Collapsing and expanding text.

Bookmarks

Bookmarks are a quick and simple way of marking certain places within your document. Being able to jump from one place to another in your document significantly speeds the editing process.

 How to set and recall Bookmarks.

Advanced HTML help and Syntax Validation

If you hold your mouse over a tag or attribute, popup help appears giving you a short description of the tag or attribute. For example, if you hold the mouse over the BORDERCOLORLIGHT attribute in the TABLE tag, a popup message appears saying “Sets brighter border color used to draw a 3-D border”

If you make any syntax errors while you are typing HotDog will notify you immediately. Furthermore, most times HotDog can recognize what the error is and will tell you what part of your tag is incorrect. In any event, HotDog will offer you help describing the full HTML specification of the tag. You can also define which syntax files you use to check your work. For example, to be on the safe side, you might only use the HTML 3.2 syntax file. This means that any tags or attributes that you type which don’t form part of this specification will be highlighted in red.

The correct value for this attribute is MIDDLE.

These sorts of errors can be avoided by using the HTML Property Sheet.

 Defining which Syntax Files are to be used.

 Learn more about the HTML Property Sheet.

Tag or Attribute Coloring

Changing the color of tags helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. For example, if you are interested in Image tags, then color them green. This way they stand out against all the clutter of surrounding tags. You can also color attributes differently from the tags around them. This mode of editing is useful when you are interested in the attributes and values of a tag.

 How to color tags different colors. (Tag Coloring)

 How to color the attributes of a tag. (Attribute or Syntax Coloring)

Spell Checking

To correct a misspelled word, right click over it to gain a list of 16 suggestions. Slide the mouse down to the word you want to insert and click. Or, to spell check your entire document, on the Edit menu, click on Check Spelling.

Follow links from within a document

When editing HTML documents we thought how useful it would be to be able to open documents referenced from inside your current document. In a currently opened document, right click on a link to another document and select “Open File” to open it.

Improved Image Manipulation

One of the problems with HTML and images is that you can’t see what the image looks like just by staring at the HTML. HotDog includes mouse over imaging. That is, if you hold your mouse over an IMG tag, a small thumbnail image of the picture appears. This is a quick way to check which image is which.

If you want to do more serious image manipulation - such as file size optimization, right click over the image and select Preview Image .

  Related Topics


Collapsing and Expanding text

 To Collapse text:

1	Highlight the block of text you want to collapse.

2	Click one of the [image] icons at the top or bottom of your selection.

 To Expand text:

•	Click the [image] icon next to the text you want to expand.

Tip

If you have nested collapsed text, you can expand all the text at once by holding down the SHIFT and CTRL buttons, then pressing the = key.


How to set and recall Bookmarks

 To set a bookmark:

•	On the line you want to add the bookmark, press CTRL  SHIFT and a number from 0 to 9.

 To recall a bookmark:

•	Press CTRL+ #   where # is a number from 0-9 to recall a bookmark.


Learn more about the HTML Property Sheet

Not yet implemented.


How to color the attributes of a tag. (Attribute or Syntax Coloring)
How to color attributes of a tag. (Attribute or Syntax Coloring)

Turning on Tag Coloring

•	At the bottom of the document, click the <a>Tag button.

(The HTML Tags manager is used to define the different colors.)

Turning on Syntax Validation

•	At the bottom of the document, click the <a>Syntax button.

(The HTML Tags manager is used to define new Tags.)


Editor Functions

Rov

Rover is a basic browser that comes with HotDog. A web browser is the software that you use to view the Internet, such as Microsoft Internet Explorer or Netscape. Rover is a basic browser that can not display special effects such as JAVA Script. However, if you already have MS Internet Explorer installed on your computer, HotDog will ask you if you want to exchange Rover with MS Internet Explorer. Unless you have compelling reasons to not do so, click yes to this option.

Web

The web button lets you surf the Internet from within HotDog. This is very useful, because if you come across a web page you like, you can download it - images and all to your hard drive. Just click the button and select the directory where you want to download the document and any associated files. A new HotDog document will open displaying the downloaded file.

Rule

HotDog’s internal browsers incorporate rulers that allow you to expand or contract the size of a web page. This means you can instantly see what your web page looks like under browsers using different screen resolutions. Furthermore, because you can slide the rulers, you can gauge how your web page degrades under different browser dimensions. When working towards browser constraints, HotDog gives you pixel perfect control.

<a> Syn

Syntax Highlighting as opposed to Tag highlighting, highlights attributes and values different colors from the tag name. For example, <IMG ALIGN=”left”>.

<a> Tag

Tag Highlighting highlights different tags by different colors. So for example, the <IMG> tag is a different color to the <TABLE> tag.

Gut

The Gutter provides a space along the left side of a document for line numbering, bookmarks and collapsible bookmarks.

Wra

With Word Wrap selected, any long lines that you type are automatically wrapped to the next line down the page. If you turn word wrap off, horizontal scrollbars will appear if you type a long line.

Hid

Hidden Fields toggles on and off hidden characters. For example, with Hidden Fields on, carriage returns, tabs etc. are displayed.

Orv

The Overwrite button toggles on and off insertion or overwriting of text.

Win

HotDog can save files in different formats (Windows, UNIX, Mac etc). This button toggles between them. Unless you specifically need to open your files on a different platform, leave the format as Win (Windows).

Browser Width

This box displays the exact width of the browser. The box also contains a drop down list giving the three typical browser widths; 640, 800 and 1024.

  Related Topics


frmDoc context help


Rov

Rover is a basic browser that comes with HotDog. A web browser is the software that you use to view the Internet, such as Microsoft Internet Explorer or Netscape. Rover is a basic browser that can not display special effects such as JAVA Script. However, if you already have MS Internet Explorer installed on your computer, HotDog will ask you if you want to exchange Rover with MS Internet Explorer. Unless you have compelling reasons to not do so, click yes to this option.

  Editor Overview


Web

The web button lets you surf the Internet from within HotDog. This is very useful, because if you come across a web page you like, you can download it - images and all to your hard drive. Just click the button and select the directory where you want to download the document and any associated files. A new HotDog document will open displaying the downloaded file.

  Editor Overview


Rule

HotDog’s internal browsers incorporate rulers that allow you to expand or contract the size of a web page. This means you can instantly see what your web page looks like under browsers using different screen resolutions. Furthermore, because the you can slide the rulers, you can gauge how your web page degrades under different browser dimensions. When working towards browser constraints, HotDog gives you pixel perfect control.

  Editor Overview


<a> Syn

Syntax Highlighting as opposed to Tag highlighting, highlights attributes and values different colors from the tag name. For example, <IMG ALIGN=”left”>.

  Editor Overview


<a> Tag

Tag Highlighting highlights different tags by different colors. So for example, the <IMG> tag is a different color to the <TABLE> tag.

  Editor Overview


Gut

The Gutter provides a space along the left side of a document for line numbering, bookmarks and collapsible bookmarks.

  Editor Overview


Wra

With Word Wrap selected any long lines that you type are automatically wrapped to the next line down the page. If you turn word wrap off, horizontal scrollbars will appear if your type a long line.

  Editor Overview


Hid

Hidden Fields toggles on and off hidden characters. For example, with Hidden Fields on, carriage returns, tabs etc. are displayed.

  Editor Overview


Orv

The Overwrite button toggles on and off insertion or overwriting of text.

  Editor Overview


Win

HotDog can save files in different formats (Windows, UNIX, Mac etc). This button toggles between them. Unless you specifically need to open your files on a different platform, leave the format as Win (Windows).

  Editor Overview


Width
Browser Width

This box displays the exact width of the browser. The box also contains a drop down list giving the three typical browser widths; 640, 800 and 1024.

  Editor Overview


Resource Managers - Overview

As more and more functionality was added to HotDog we had to look for a place to put it. Resource Panels were the ideal solution. A Resource Panel is a floating resizable window that groups similar functionality into the same place. Each Resource Panel performs a specific task related to web authoring.

Generally functionality that helps you create web pages but does not actually edit them directly can be found in the Resource Manager. For example, the Internet Files Resource Panel is concerned with the uploading of documents to the Internet, the Link Verifier checks your document for broken links. There are, however, special Resources that do edit your page, such as the Extended Characters Manager which lets you insert foreign characters into your document.

Resource Panels are opened from the View menu. If you want to show/hide all opened Resource Panels with a single click, click on the “Resources” button located at the bottom center of the HotDog window. HotDog also includes typical Resource Manager presets, such as those that might be used for uploading documents to the Internet. These presets can be found by right clicking on the “Resources” button.

 More details on how to move/resize Resource Panels.

  Local Files

The Local File Manager is very similar to Microsoft Explorer™.  You can use the Local File Manager to manipulate or filter files. Using Drag and Drop, the Local File Manager provides an easy way of inserting links into your documents. The Local File Manager was designed to aid with the file manipulation required of larger WebSites.

  HTML Property Sheet

The HTML property sheet helps you code HTML. It contains all the tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer. As you type, it continuously updates you as to the attributes available in each tag. It also lists each attribute by browser type. The HTML Property sheet was designed because it has become clear that a professional web designer needs to know every bit of information about every tag/attribute he or she is using, including what browser supports which tag or attribute.

  Websites

WebSites are collections of HTML documents. Using HotDog to create a WebSite on your local computer will mean that when it comes time to upload to the Internet, one click is all it will take to transfer your work. Using WebSites greatly reduces the amount of organization required to get you up and running on the Internet.

  Macro Editor

The Macro Manager is used to insert text and tags into your document. Its key advantage is that it can insert text before and after selected text in the document.

  Supertoolz

For quick access to your Supertoolz, the Supertoolz Manager can be useful. Just double click on any of the Supertoolz to activate them. Remember, you will need to first install some Supertoolz.

  Internet Files

Using simple Drag and Drop you can easily upload files to your server. Uploading and downloading files is as simple as dragging them to and from the Local File Manager. The Internet Files Manager also contains the “Add New Internet Connection” Wizard. The Internet File Manager was created as an easy way to quickly upload and download files, while still inside HotDog.

  HTML Tags

HotDog comes with a complete listing of all the HTML tags we could find - plus a few more. The HTML Tag Manager is used to define different colors for different tags, create shortcut keys for different tags and for defining your own tags.

  Multiline Clipboard

We found that it is very useful to be able to drop commonly used text straight into our documents. So we designed the Multiline Clipboard. It is simply a clipboard with unlimited capacity. However - it is very useful, we use it for storing the syntax for commonly used images and colors.

  Internet Explorer Favorites and Netscape Bookmarks

If you want to insert a link to one of your favorite WebSites, just drag the bookmarked link into your web document and it will be automatically inserted.

  Extended Characters

If you need to insert foreign or unusual characters such as  © or ™, use the Extended Character Manager. Just drag and drop the characters you need directly into your document.


Local File Manager

The Local File Manager is very similar to Microsoft Explorer™.  You can use the Local File Manager to manipulate or filter files. Using Drag and Drop, the Local File Manager provides an easy way of inserting links into your documents. The Local File Manager was designed to aid with the file manipulation required of larger WebSites.

Right Click over any file in the File Manager.

  A menu appears asking you if you want to:

•	Open the file for editing (in the case of text and HTML files).

•	Insert as link.

The ‘Insert as link’ option places a link from your Web document to the file you clicked on. It would be used if in the document you are editing, you want to insert a link to another file:

1	In the Local File Viewer, right click on the file you want to insert.

2	A link to that file is inserted at the cursor’s position in the document you were editing.

  Related Topics


HTML Property Sheet

The HTML property sheet helps you code HTML. It contains all the tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer. If you need to define custom tags, HotDog will automatically add them to the HTML property sheet for you.

There are many different ways you can use the HTML property sheet. A few of the most common are described below:

 A quick way of wrapping tags (such as the <center> tag) around highlighted text.

 A shortcut for the insertion of tags into you document.

 A very quick way of inserting attributes into tags.

 Example of using the HTML Property Sheet with the TABLE tag.

 How to add Tags to the HTML Property Sheet.

Also have see Code Completion for a quick way of inserting tags into your document.

  Related Topics


WebSites

Keeping all your HTML and associated files together can be difficult. HotDog WebSites are used as an easy way to group files (belonging to a particular WebSite) together. When you upload a WebSite to the Internet, all the files in that WebSite are uploaded along with it.

HotDog5 WebSites have been vastly simplified since HotDog4. Their true versatility is that HotDog WebSites do not tie you down to any system or program. Any group of HTML documents can be made into a HotDog WebSite and still used and edited by other software.

While using HotDog WebSites you gain the benefits of many features. For example:

•	Your document states are preserved.

(i.e. Any bookmarks and collapsed text you create are remembered from use to use of HotDog).

•	WebSite wide Find and Replaces.

(Includes special features for Meta and Body Tags).

•	Full Implementation of Tasks.

(A Task is a formal note that is attached to a document in a WebSite. It contains information about the nature of the task to be completed as well due dates etc.)

•	One Button Uploading or Publishing.

•	Link Checking.

•	Multiple User Support.

HotDog now caters to the needs of designers of very large WebSites. The new implementation of ‘Tasks’ allows a WebSite to be designed coherently by coordinating the work of many people. All the basic functionality required of  multi-user support has been included. For instance, HotDog will detect two users trying to edit the same file at once and warn them.

What do you want help on?

 Open the Website Manager.

 Beginner’s Guide to HotDog WebSites.

 Advanced Guide to HotDog WebSites.

 General Website Functionality. (The WebSites Tab)

Includes: Creating new WebSites, WebSite Properties, Uploading WebSites (or Publishing Websites), Editing BODY and META Tags for every document in a website, WebSite Wide Find and Replace, Adding and Removing files to and from a WebSite.

 Using Tasks with WebSites. (The Tasks and Browse Tabs)

Includes: Adding and Removing Tasks to a WebSite, Some Tips on Multi-User WebSite Construction. Using the Integrated WebSite Browser with the Task Manager.

 Checking WebSites for Errors. (The Checks Tab)

Includes: Link Checking, Optional External Link Checking, Resource Gathering (i.e. for images and other resources that are linked to locally but do not lie within the Website documents directory.)

  Related Topics


Open the WebSite Manager

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.


General Website Functionality (The WebSite's Tab)
General Website Functionality (The WebSites Tab)

The WebSites Tab controls most of the basic functionality for building WebSites. Here you can create new WebSites, add or remove documents to and from a WebSite and more. The WebSite wide Find and Replace is one of the most important features on this panel. It lets you makes changes to all documents that form part of your WebSite.

Furthermore, using the simple wizards included in the WebSite wide Find and Replace you can make changes to the BODY and META tags (i.e. all your Document Properties such as text color etc.) in all the documents in your WebSite in one go.

What do you want to do?

 Create a new WebSite.

 Open or Close a WebSite.

 Edit a WebSite’s Properties.

 Upload a WebSite.

 WebSite wide Find and Replace (including BODY and  META tag editing).

 Add a new Task to a WebSite.

 Check a WebSite for Errors.

 Add or Remove documents to and from a Website.

  Related Topics


Create a new WebSite

 First open the WebSites Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSite Manager, ensure the “WebSites” tab is selected.

Click [image] to open the WebSite Wizard. The WebSite Wizard will guide you through the process of creating a new WebSite.

What do you want to do?

 Learn more about the Website Wizard.


Open or Close a WebSite

  To open an existing WebSite:

1	In the WebSite Manager click on the “WebSites” tab.

2	Click [image].

3	Use the File Picker to select the WebSite you want to open.

(All WebSite files are stored as *.HWS)

  To close an open WebSite:

1	In the WebSite Manager click on the “WebSites” tab.

2	Click [image].


Edit a WebSite's Properties

A WebSite’s properties include the directory in which the WebSite resides, the server the WebSite is uploaded to and other options. See WebSite Properties for more details.

First open the WebSite Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSite Manager, ensure the “WebSites” tab is selected.

 Right click over the WebSite you want to edit and select “Properties”.


Upload a WebSite

First open the WebSite Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSite Manager, ensure the “WebSites” tab is selected.

4	Open the WebSite you want to upload.

 Click [image] to upload the currently opened WebSite.

Note:

If you have not already defined a server to which to upload, you will need to do so now. See “Create New WebSite Wizard” for more details.


Delete a WebSite

Note: This Topic is No Longer Valid.

First open the WebSite Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

 Right click on the WebSite you want to delete and select delete.


Add or Remove documents to a WebSite

First open the WebSite Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSite Manager, ensure the “WebSites” tab is selected.

 To add a file to your WebSite:

1	Right Click on the WebSite to which you want to add a file.

2	Select “Add Documents to Folder…”.

3	Use the file picker to find the files you want to add to your WebSite.

4	Click on the file you want to add (hold the SHIFT key down for multiple selections).

5	Click “OPEN” to add the files to your WebSite.

 To remove a file from your WebSite:

1	Double click on the WebSite you want to remove a file from.

2	In the WebSite file list, right click on the file you want to remove.

3	Select Remove Document.


WebSite wide find and Replace (including BODY and  META tag editing)

First, open the WebSite Wide Find and Replace dialog:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSite Manager, ensure the “WebSites” tab is selected.

4	Click [image].

  Changing all the BODY Tags (i.e. Document Properties) in your WebSite in one go.

1	Click the “BODY” button.

This opens the Document Properties dialog. Use this dialog to make changes to all the documents in your WebSite.

2  Click OK.

3  You are now asked to confirm that you want to make the changes to all your documents.

4  Click YES to make changes to all your documents.

  Changing all the META Tags in your WebSite in one go.

1	Click the “META” button.

This opens the Document Information dialog. Use this dialog to make changes to all the documents in your WebSite.

2  Click OK.

3  You are now asked to confirm that you want to make the changes to all your documents.

4  Click YES to make changes to all your documents.

  Finding and Replacing Text in all the documents in your WebSite.

1	Click the “Text” button.

2	In the Find and Replace dialog, enter the search term into the “Text to Find” box.

3	Enter the term to replace the search term into the “Text to Replace” box.

4	Click OK.

5	You are now asked to confirm that you want to make the changes to all your documents.

6	Click YES to make changes to all your documents.


Add a new Task to a WebSite

  Click [image] to add a task to a document in your WebSite.

See “Using Tasks with WebSites” for more details.


Check a WebSite for Errors

  Click to check your WebSite for errors.

See “Checking WebSites for Errors” for more details.


Using Tasks with WebSites (The Task's Tab)
Using Tasks with WebSites (The Tasks Tab)

When many people are working together on one WebSite the need to coordinate their actions is paramount. A “Task” is a note that is attached to a document in a WebSite. This note typically comprises of some instructions to be given to  someone working on the WebSite. A task includes the following information:

•	The subject of the Task (i.e. Update this web page).

•	Who the task is assigned to and who assigned the task.

•	The date the task was assigned and a date indicating by when the task must be completed.

•	The filename of document associated with the task.

•	A Task Category, Status and Priority.

•	A full description of the task to be completed.

You can assign tasks from the Task Manager or the WebSite Browser (the Browse tab). The WebSite browser lets you look through your WebSite, assigning tasks to problem pages where necessary.

What do you want to do?

 Add New Task to a WebSite.

 Edit a Task’s Associated File.

 Delete a Task.

 Edit a Task’s Properties.

 Filter Tasks.

 Use the Integrated Browser to Assign Tasks to Files.

  Related Topics


Add a Task to document in a WebSite

Tasks are like memo notes, they can be added to each of the documents in your WebSite to remind you or inform others of changes to be made.

 To add a task to document:

Open the WebSites Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSites Manager, click the “Tasks” tab.

4	Click [image] to add a Task.

5	Enter the task details and click OK to save the task.

 To view all the tasks connected with a WebSite:

In the WebSite Manager, click the “Tasks” tab.

The list displayed lists all the tasks connected with your WebSite.

 A task not yet started.

 A completed task.

 A task under progress.

Just right click on a task and select “Edit Task File” to open the associated file, ready for editing in HotDog.


Edit a Tasks Associated File

  To open an HTML file that is associated with a task:

1	In the Tasks tab of the WebSite Manager right click on the task associated with the file you want to edit.

2	Select “Open Task File”.


Delete a Task

  To delete a task:

1	In the Tasks tab of the WebSite Manager right click on the task you want to delete.

2	Select “Delete”.


Edit a Task's Properties

  To edit a task’s properties:

1	In the Tasks tab of the WebSite Manager right click on the task you want to edit.

2	Select “Properties”.


Filter Tasks

  To file tasks by progress:

1	In the Tasks tab of the WebSite Manager click on the task progress list.

2	Select the Filter you want to apply to your task list.

Description of Filter Types.

Show All	Lists all tasks.
Active Tasks	Lists only currently active tasks.
Due this Week	Lists only tasks due this week.
Overdue Tasks	Lists only overdue tasks.
Future Tasks	Lists all that tasks that are not due to begin.
Completed Tasks	Lists all completed tasks.


Use the Integrated Browser to Assign Tasks to Files

 Open the WebSites Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	In the WebSite Manager, open the WebSite you want to browse.

4	Click the Browse tab.

5	Click the “Reload WebSite” [image] icon to display your WebSite’s homepage.

You can navigate in this browser window through your WebSite, adding tasks to any pages that need work.

To add a task to the currently loaded web page:

Click [image].


Checking WebSites for Errors (The Check Tab)

The WebSite Manager’s functionality includes Link Verification and Resource Gathering. Link verification means that all the links to local resources (such as Images and other HTML documents stored on your computer) are automatically tested. All the external links (such as links to other websites) are listed individually. You can tell the checker to verify these links as well. Resource Gathering is a special function of the link checker. When checking the links of your WebSite any resources (Images, HTML documents etc.) that are found outside of the defined document directory are listed. You can automatically import them into your WebSite document directory.

What do you want to do?

 Edit a Broken Link.

 Verify an External Link.

 Refresh the Link List.

 Stop Checking Links.

 Collect All External Links.

  Related Topics


Edit a Broken Link

  To edit a broken link:

1	In the Checks section of the WebSite Manager, right click on the broken link you want to edit.

2	A window appears with all the files containing that particular error.

3	Do one of the following:

•	Click on the file you want to edit and then click “Edit File(s)”.

•	Change the broken link by:

1. Entering the new link in the “Replace Resource” box.

2. Select the files in which you want the link to be changed.

3. Click “Update”


Verify an External Link

  To verify an external link:

1	In the Checks section of the WebSite Manager, click on the external resource you want to verify.

2	Click


Refresh the Link List

  To refresh the link list:

1	In the Checks section of the WebSite Manager, click [image].


xxxx error in above topic.


Stop Checking Links

  To stop checking a broken link:

1	In the Checks section of the WebSite Manager, click on the external resource you want to check.

2	Click


Collect All External Links

  To collect all external links and resources:

1	In the Checks section of the WebSite Manager, click [image].


frmMain_WS context help.


File Filter

Lists the types of files to display. This is useful for narrowing the list of files displayed to only those files in which you're interested.

  Overview


List of Defined WebSites

This list contains all the WebSites your have previously defined. Double click a WebSite to open it.

  Overview


Currently Opened WebSite

The currently opened WebSite (including sub-directories) is listed here.

  Overview


WebSite File List

All the files that form part of the WebSite selected in the “Currently Opened WebSite” window are listed here. Right click on a file for additional options.

  Overview


WebSite Wide Find and Replace

This dialog is used to Find and Replace text across an entire WebSite.

  Overview


Text to Find

This text will be replaced by the text in the “Text to Replace” box.

  Overview


Text to Replace

This text replaces the text in the “Text to Find” box.

  Overview


Case Sensitive Search

If you search is case sensitive, then the text “peter” will not be replaced with “Peter”.

  Overview


Whole Word Search

Text will only be replaced if it is a whole word. For example say the Whole Word option is checked:

Text to Find: “fur”

Text to Replace: “hair”

In the example above, the word “furfuraceous” would not be changed by the search.

  Overview


Task Filter

Lists tasks only according to whether they are:

•	Active.

•	Due this week.

•	Overdue.

•	Future.

•	Completed.

  Overview


Task List

This list displays all the tasks in the WebSite.

  Overview


Task Subject

A quick, one line description of the task.

  Overview


Assigned To

The name of the person to whom the task is assigned.

  Overview


Assigned By

The name of the person who assigned the task.

  Overview


Date to Begin

The date by which the task should be started.

  Overview


Date Due

The date by which the task should be completed.

  Overview


File Name

The name of the file which is associated with the task.

  Overview


Category

The nature of task to be fixed. For example, broken link, bad image, spelling error.

  Overview


Status

The current status of the task.

  Overview


Priority

Establishes the priority of the task.

  Overview


Notes

A further description of the task.

  Overview


Check List

This list contains all the errors and external links found within your WebSite.

  Overview


List Files by Type

Lists the types of files to display. This is useful for narrowing the list of files displayed to only those files you're interested in.


List of files in WebSite

This window displays all the files that form part of your WebSite.


Create New WebSite Wizard

The WebSite wizard takes you step by step through the setting up of a new WebSite on your computer.

First open the WebSite Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

 Click the “Add New WebSite” button on the top left of the WebSite Manager.

When you first start the WebSite Wizard you will be asked whether you want to create your WebSite from a FTP site or from your local hard drive. Choose FTP site if you do not have a local copy of your WebSite.

Step 1.

Give your WebSite a name. This name will be used for your reference only. For example, “The BookShop”.

Step 2.

Choose a base directory for your WebSite document files. This directory is important because all files are referenced relative to it. This maybe new terminology for you, but the concept of relative referencing is fully explained in the tutorial below:

 Absolute and Relative References

If you want to become familiar with HTML this tutorial is highly recommended reading. You may want to read it before proceeding.

Step 3.

Set a graphics directory. This directory is just a convenient place to store your graphics. You don’t have to use it, but it is recommended. The graphics directory should be under your document directory.

Step 4.

If you already have one or more Internet Server Addresses defined, the WebSite Wizard will prompt you to select one of these addresses for your WebSite. If you have no server addresses defined, or want to enter a new one, click ‘Add Site’.

If you are not sure what your server address is have a look at the Beginners Guide to FTP tutorial.

Step 5.

You are now prompted to enter which files associated with your web page (such as images etc.) you want to upload. For example, if you have made no changes to any images an you simply want to re-upload your HTML files, using this option, you can tell HotDog to not re-upload images. However, generally you want to upload all linked files.

Step 6.

Decide whether you want HotDog to overwrite existing identical files on your server or not. If you are unsure, select ‘Always overwrite existing files’.

Step 7.

The WebSite manager can automatically create an index.html file for you. The index.html file is automatically passed to a visitor’s browser when they surf to your WebSite and don’t specify a file to open. (i.e. This is the difference between entering the URL http://www.sausage.com and http://ww.sausage.com/index.html)

If at any time you want to change any of the properties of your WebSite, just open the WebSite manager, right click over your project and select ‘Properties’

What do you want to do?

 Learn more about WebSites work

  Related Topics


frmProjectWiz Context Help


Create WebSite HomePage

The WebSite manager can automatically create an index.html file for you. The index.html file is automatically passed to a visitor’s browser when they surf to your WebSite and don’t specify a file to open. (i.e. This is the difference between entering the URL http://www.sausage.com and http://ww.sausage.com/index.html)

  Overview


File Management

Decide whether you want HotDog to overwrite existing identical files on your server or not. If you are unsure, select ‘Always overwrite existing files’.

  Overview


 Support Files

Enter the files associated with your web page (such as images etc.) that you want to upload. For example, if you have made no changes to any images an you simply want to re-upload your HTML files, using this option, you can tell HotDog to not re-upload images. However, generally you want to upload all linked files.

  Overview


Web Server

The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, Elise might enter, www.woodnet.com

  Overview


Directory

This is the directory on your server used to store your HTML files.

  Overview


User Name

Your login name (or User Name) is given to you by your ISP (Internet Service Provider- the  company that gets you connected). Basically, your Login name and password identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

  Overview


Password

Your password is also provided by your ISP. If you don't know it, you will need to get in contact with them. Instructions on how to do this are provided in the tutorial described below.

  Overview


Port Number

The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

  Overview


Timeout
Time-out

The Time Out time determines how long HotDog tries to log on to your server.

  Overview


Add Site

Click this button to define a new Server Connection.

  Overview


List of WebSites

This list displays all the Server Connections you have defined. Just select the server to which you want to upload.

  Overview


WebSite Name

Give your WebSite a name. This name will be used for your reference only. For example, “The BookShop”.

  Overview


Local WebSite Directory

Choose the directory on your computer where your WebSite will be (or is) located.

  Overview


Local Graphics Directory

This directory specifies where the images in your WebSite are going to be commonly stored. It is used only as convenience and is not necessary.

  Overview


Choose a method to create a WebSite

You can create a HotDog WebSite in three ways:

  Create a new WebSite.

Select this button if you are going to create a completely new WebSite.

  Create a WebSite from Local Directory Structure.

Use this option if you already have a WebSite on your computer.

  Create a WebSite from WebServer (FTP).

Use this option if the only copy of your WebSite is already on the Internet.

  Overview


Where to Publish your WebSite

When you publish your WebSite you have two options:

Publish to the Internet.

When you are ready to upload your WebSite, select this option. Select the site you want to upload to from the drop down list. To define a new site, click “Add Site”

Publish to a Local Directory

Instead of uploading your WebSite to the Internet you can publish it to a directory on your computer. Use the box below to select the directory you want to publish to.

  Overview


WebSites - Tutorial

HotDog WebSites are simply directories on your computer. Everything in these directories (and the directories themselves) gets copied to your server when you upload. This means that the directory structure on your server WebSite is exactly the same as the directory structure of the WebSite on your local computer.

What happens when you create a WebSite.

When you first create a WebSite you define your Base Directory. The contents of the Base Directory you define are copied to your WebSite when you upload. This includes any sub-directories. For example, say you have the following directory structure on your computer:

   If you define your Base Directory as “C:\WebSites\Art WebSite” when you upload your WebSite all the contents of the Art WebSite are uploaded.
The fact that the directory structure is duplicated is important because of the way your files are linked to each other. Each link to another file that you have created, whether it be an image or another HTML document should be referenced relatively. For example, say in the file “peter.html” you have a link to an image in your image directory:
<IMG SRC=”images/elise.jpg”>
When a browser reads this link it looks for file “elise.jpg” in the “images” directory. The browser assumes that the images directory is located under the directory where the current file (peter.html) resides. This is what is meant by relative referencing. By using it you are forced to maintain identical directory structure on your computer, and your server. However, by using WebSites this is easily accomplished. If you are careful to keep all the files you link to under or in the directory you defined as your Base Directory then when your WebSite is uploaded, HotDog will automatically create the required directory structure on your server. For more details on Relative Referencing have a look at the Relative and Absolute Links tutorial.

The difference between the Base Directory and the Web Server Directory.

You defined Web Server Directory in the Create New Internet Connection Wizard. This directory is the directory on your FTPsite where your server looks for all of your HTML files. This directory is usually called “www” or “public_html”. Your Base Directory is the directory on your hard drive where you store your WebSite. It is these two directories that determine exactly where your WebSite is uploaded.

For example, say Elise has the following WebSite defined:

 The other important settings she has defined are:
WebSite Document Directory:
C:\WebSites\Art WebSite

Web Server Address:
www.woodnet.com

Web Server Directory:
public_html

When Elise uploads her WebSite, everything in the Art WebSite directory is copied to:

public_html

Everything in the Art WebSite/Graphics directory is copied to:

public_html/Graphics

Example 1

Say Peter had the following WebSite defined:

Base Directory:

D:\Program Files\Sausage\WebSites\Cthulhu WebSite

Web Server Directory:

www

Peter has the following files in different directories in his WebSite:

index.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite
bosch.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Horror
azathoth.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Horror
lovecraft.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Horror Writers
waterhouse.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Painters
borges.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Writers
tmbg.html	D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Music

When Peter uploads his WebSite, in which directory do the files listed above end up on his server?

Answers

index.html	www

bosch.html	www/Horror

azathoth.html	www/Horror

lovecraft.html	www/Horror Writers

waterhouse.html	www/Painters

borges.html	www/Writers

tmbg.html	www/Music

Example 2

What files and where would the files be uploaded to if peter changed his Base Directory to:

Base Directory:

D:\Program Files\Sausage\WebSites\Cthulhu WebSite\Horror

Server Directory:

www

Answers

bosch.html	www

azathoth.html	www

Example 3

What about if Peter changed his Base Directory and Server Directory to:

Base Directory:

D:\Program Files\Sausage\WebSites

Server Directory:

www

Answers

index.html	www/Cthulhu WebSite

bosch.html	www/Cthulhu WebSite/Horror

azathoth.html	www/Cthulhu WebSite/Horror

lovecraft.html	www/Cthulhu WebSite/Horror Writers

waterhouse.html	www/Cthulhu WebSite/Painters

borges.html	www/Cthulhu WebSite/Writers

tmbg.html	www/Cthulhu WebSite/Music

Example 4

What about if Peter changed his Base Directory and Server Directory to:

Base Directory:

D:\Program Files\Sausage\WebSites\Cthulhu WebSite

Server Directory:

www/Cthulhu

Answers

index.html	www/Cthulhu

bosch.html	www/Cthulhu/Horror

azathoth.html	www/Cthulhu/Horror

lovecraft.html	www/Cthulhu/Horror Writers

waterhouse.html	www/Cthulhu/Painters

borges.html	www/Cthulhu/Writers

tmbg.html	www/Cthulhu/Music

  Related Topics


WebSite Properties

Each WebSite contains its own unique properties. These properties describe the server address (i.e., where you want to upload your work to) and where your document directory resides.

  To access these properties:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

3	Right click over a WebSite name and select ‘Properties’.

The properties of a HotDog WebSite have been divided into the following groups (or windows):

General Properties

This window describes the name of the WebSite and how long you have been working on it.

Directories

The directories window contains the default location of documents that form part of your WebSite. The Document Directory is very important as it defines the directory structure that your WebSite will use on your server. This whole concept is greatly expanded upon in the tutorial describing in the WebSites Tutorial .

Web Server

The Web Server window contains the address of the web server used for your WebSite. For more details on what a web server is, and how to find out what address you should be uploading to, have a look at the beginners guide to FTP .

Upload Options

The upload options let you determine which files associated with your web pages are uploaded.

Publishing

When you go to upload your files, you can also automatically change the format of your documents. Publishing usually entails making the occasional word substitution, or converting extended characters to their HTML equivalents.

  Related Topics


WebSite Upload Options

To open the Directories Properties window,

1	Right Click over any WebSite, and select Properties.

2	Click on ‘Upload Options’ on the tree view of WebSite options.

Note: You have to right click over the WebSite name, not any of the files that are included with the WebSite.

Document Support Files to Upload

These check boxes let you control what happens to the files associated with your web page (images etc.) when you upload to your server. Usually you would want to upload all associated files.

File Management

Sets preferences for overwriting new or older files already on the server.


General Properties
General WebSite Properties

To open the General Properties window,

1	Right Click over any WebSite, and select Properties.

2	Click on ‘General’ on the tree view of WebSite options.

Note: You have to right click over the WebSite name, not any of the files that are included with the WebSite.

The WebSite Name defines the name of your WebSite, and you can edit it here.

Also listed are when the WebSite was created, last accessed and how long you have been working on it.


WebSite Directories

To open the Directories Properties window,

1	Right Click over any WebSite, and select Properties.

2	Click on ‘Directories’ on the tree view of WebSite options.

Note: You have to right click over the WebSite name, not any of the files that are included with the WebSite.

From this window you can set the different directories that make part of your WebSite.

Document Directory

The Document Directory is most important, as it and the WWW Server Directory define where your files will end up when they are uploaded.

For example, if you store all the HTML files that make up your WebSite in the following directory:

C:\Program Files\HotDog4\HTML Files\Example WebSite - and define this directory as your Document Directory,

and also set your Web Server directory to 'Public_HTML' then when you upload your WebSite, all your HTML files will be copied to the 'Public_HTML' directory on your server.

For more details see the WebSite Tutorial .

Graphics Directory

Setting the Graphics directory is optional. The main advantage of using a graphics directory is that when you insert an image, HotDog will automatically show you the graphics directory associated with your WebSite. This will overwrite the graphics directory you defined in HotDog Preferences  (i.e., when you insert graphics into any documents that make up your WebSite, the initial graphics directory shown to you, for the purpose of selecting a graphic, will be that which you define in the WebSite Graphics Directory. For other files, not forming part of your WebSite, the graphics directory shown will be that which you defined in HotDog Preferences.)

If you do decide to use the Graphics directory, make sure it 'hangs' below your WebSite Document Directory.

For example, if you set your Document Directory to C:\Program Files\HotDog4\HTML Files\Example WebSite then set your graphics directory to (say) C:\Program Files\HotDog4\HTML Files\Example WebSite\Graphics and not C:\Graphics.

Publishing Directory

When you upload your files to the Internet, at your option, you can also publish them. Publishing files usually entails making a few simple word substitutions. The publishing directory will place a copy of your published files in the directory you specify. For more details on what you can actually do with publishing, see  Publishing Websites .


Web Server Options
WebSite Web Server

To open the Web Server Properties window,

1	Right click over any WebSite, and select Properties.

2	Click on ‘Web Server’ on the tree view of the options.

Note: You have to right click over the WebSite name, not any of the files that are included with the WebSite.

Each WebSite must include what server you want to upload your WebSite to.

The web server asks for 6 pieces of information:

Server Address

The Server Address in the unique address of your Server. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, Elise might enter, www.woodnet.com

Directory

The Web Server Directory is most important, as it is this and the WebSite Document Directory that define where your files will end up when they are uploaded.

For example, if you set your Web Server directory to 'Public_HTML\WebSite1' and store all the HTML files that make up you WebSite in the following directory: C:\Program Files\HotDog4\HTML Files\Example WebSite, which is also defined as your Document Directory. Then when you upload your WebSite all your HTML files will be copied to the 'Public_HTML\WebSite1' directory on your server.

For more details see the WebSite Tutorial.

Login Name

Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). Basically, your Login name and password uniquely identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

Password

Your password is also provided by your ISP. If you don't know it, you will need to get in contact with them. Instructions on how to do this are provided in the tutorial described below.

If any of the terms above are unfamiliar to you, or you don’t know all of the details, have a look at the beginners guide to FTP (File Transfer Protocol - the language you use to upload your files)

Port

The usual port number is 21. Don’t change this default value unless your ISP tells you to do so.

Time Out

This time determines how long HotDog tries to log on to your server.


Website Publishing Options
WebSite Publishing

To open the Publishing Properties window,

1	Right Click over any WebSite, and select Properties.

2	Click on ‘Publishing’ on the tree view of the options.

Note: You have to right click over the WebSite name, not any of the files that are included with the WebSite.

You can perform the following operations with publishing. If you are new to HTML, then don’t worry. All the correct defaults are set already.

Don’t Publish on Upload

With this option selected your web pages are uploaded without being published.

Publish to a Directory

Instead of publishing your files to the Internet, you can publish them to a local directory with this option. Select the directory to publish to from the ‘Directories ’ window in the WebSite Properties.

Remove all carriage returns

HTML text without carriage returns appears as one long line. It looks terrible. Should you want your web page source devoid of carriage returns, this is the option for you.

Convert extended characters to HTML codes

If you have used any extended characters in your web document, HotDog can automatically translate them into HTML on publishing.

Replace ‘\’ with ‘/’ in file names

Generally this option should be left checked. It replaces DOS style paths with UNIX style paths.

Tag Case

Automatically changes the case of all HTML tags to the option you select on upload.

Publish as UNIX, Win or Mac/Amiga text file

The standard format for HTML files is the UNIX text file. By default, HotDog will translate all files you upload to the correct format, however, if you wish to disable this feature, ensure it is not checked.

Replace xx with yy

Use the Replace function if you wish to replace certain words or expressions on publishing (such as build notes etc.).

To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

To remove a Replace term:

1	On the ‘With’ window, click on the replace expression you want to remove.

2	Click  Delete.


frmProject Context Help


Replace Term

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Replace With Term

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Terms to be Replaced

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Add Term

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Delete Term

 To remove a Replace term:

1	On the ‘With’ window, click on the replace expression you want to remove.

2	Click  Delete.

  Overview


Don't Publish on Upload

With this option selected your web pages are uploaded without being published.

  Overview


Publish to a directory

Instead of publishing your files to the Internet, you can publish them to a local directory with this option. Select the directory to publish to from the ‘Directories ’ window in the WebSite Properties.

  Overview


Remove all Carriage Returns

HTML text without carriage returns appears as one long line. It looks terrible. Should you want your web page source devoid of carriage returns, this is the option for you.

  Overview


Convert Extended Characters to HTML codes

If you have used any extended characters in your web document, HotDog can automatically translate them into HTML on publishing.

  Overview


Replace '\' with '/' in filenames

Generally this option should be left checked. It replaces DOS style paths with UNIX style paths.

  Overview


Use General Publishing Options

Instead of redefining all the publishing options for a WebSite, you can just use the publishing options you defined for generally. These options are located in the General Preferences Menu. (Edit Menu, Preferences, Publishing Tab.)

  Overview


Tag Case

Automatically changes the case of all HTML tags to the option you select on upload.

  Overview


File Format

The standard format for HTML files is the UNIX text file. By default, HotDog will translate all files you upload to the correct format, however, if you wish to disable this feature, ensure it is not checked.

  Overview


Document Support Files to Upload

These check boxes let you control what happens to the files associated with your web page (images etc.) when you upload to your server. Usually you would want to upload all associated files.

  Overview


File Management

Sets preferences for overwriting new or older files already on the server.

  Overview


Web Server

The Server Address in the unique address of your Server. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, Elise might enter, www.woodnet.com.

  Overview


Directory

The Web Server Directory is most important, as it is this and the WebSite Document Directory that define where your files will end up when they are uploaded.

For example, if you set your Web Server directory to 'Public_HTML\WebSite1' and store all the HTML files that make up you WebSite in the following directory: C:\Program Files\HotDog4\HTML Files\Example WebSite, which is also defined as your Document Directory. Then when you upload your WebSite all your HTML files will be copied to the 'Public_HTML\WebSite1' directory on your server.

For more details see the WebSite Tutorial.

  Overview


User Name

Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). Basically, your Login name and password uniquely identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

  Overview


Password

Your password is also provided by your ISP. If you don't know it, you will need to get in contact with them. Instructions on how to do this are provided in the tutorial described below.

  Overview


Port

The usual port number is 21. Don’t change this default value unless your ISP tells you to do so.

  Overview


Timeout
Time-out

This time determines how long HotDog tries to log on to your server.

  Overview


Documents

The Document Directory is most important, as it and the WWW Server Directory define where your files will end up when they are uploaded.

For example, if you store all the HTML files that make up your WebSite in the following directory:

C:\Program Files\HotDog4\HTML Files\Example WebSite - and define this directory as your Document Directory,

and also set your Web Server directory to 'Public_HTML' then when you upload your WebSite, all your HTML files will be copied to the 'Public_HTML' directory on your server.

For more details see the WebSite Tutorial .

  Overview


Graphic Images

The main advantage of using a graphics directory is that when you insert an image, HotDog will automatically show you the graphics directory associated with your WebSite. This will overwrite the graphics directory you defined in HotDog Preferences

  Overview


Published Files

When you upload your files to the Internet, at your option, you can also publish them. Publishing files usually entails making a few simple word substitutions. The publishing directory will place a copy of your published files in the directory you specify. For more details on what you can actually do with publishing, see  Publishing WebSites .

  Overview


File List

Used to define the file types that are browser readable, such as HTML files etc.

  Overview


Add File

Adds a file type to the File List.

  Overview


Remove File

Deletes a file from the File List.

  Overview


Create New Internet Connection Wizard

This wizard guides you through the process of setting up the server address required to create an Internet Connection. Your server is the computer used to display your web pages to other people on the Internet. Once you have defined this address, HotDog creates an icon for your server in the Internet Files Manager. This lets you easily upload and download files, just double click on the server icon to create an Internet connection.

What do you want to do?

 Start the Create New Internet Connection Wizard

 Add a new Internet Connection

 Edit the details of a current Internet Connection

 See the Beginners Guide to FTP (Tutorial)

  Related Topics


Start the Create New Internet Connection Wizard

1	On the View menu, select the Resources submenu.

2	In the Resources submenu, click on Internet Files.

3	Click the [image] ‘Add New Connection’ button, near the top left of the Internet Files Manager.


Add a new Internet Connection

  First start the Add New Internet Connection wizard:

1	On the View menu, select the Resources submenu.

2	In the Resources submenu, click on Internet Files.

3	Click the [image] ‘Add New Connection’ button, near the top left of the Internet Files Manager.

Page 1.

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, Elise might enter, www.woodnet.com

Page 2.

Enter your Login name. Your login name is given to you by your ISP (Internet Service Provider- the  company that gets you connected). Basically, your Login name and password identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

Enter your Password. Your password is also provided by your ISP. If you don't know it, you will need to get in contact with them. Instructions on how to do this are provided in the tutorial described below.

Advanced Options.

•	Enter your remote directory name.

This is the directory on your server used to store your HTML files.

•	The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

•	The Time Out time determines how long HotDog tries to log on to your server.

•	The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You probably wouldn’t want this option if your Internet connection is pay per minute.

Well done. Your server details have been entered. If you have trouble connecting to the Internet, or you are unsure of some of the terms used here, have a look at the Beginners Guide to Uploading .


Edit the details of a current Internet Connection

  First open the Internet Files manager:

1	On the View menu, select the Resources submenu.

2	In the Resources submenu, click on Internet Files.

Under the server list at the top of the Internet Files Manager, right click on the server connection you want to edit.

Select “Properties”

In the Internet Server Properties dialog, make any changes you need and click OK to save any changes.

 Help on each of the properties in the Internet Server Properties dialog.


Internet Server Properties dialog

The Internet Server Properties dialog gives you quick and easy access to the logins, passwords and server address that are needed to create an server connection.

What do you want to do?

 Edit the details of a current Internet Connection

 Help on each of the properties in the Internet Server Properties dialog.

 Start the Create New Internet Connection Wizard

 Add a new Internet Connection

 See the Beginners Guide to FTP (Tutorial)

  Related Topics


Description of the properties in the Internet Server Properties dialog.

Server Name

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

Sever Address

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, a server address might be, www.woodnet.com

Login

Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). Basically, your Login name and password uniquely identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

Password

Enter your Password. Your password is provided by your ISP.

Default Directory

This is the directory in which your server looks to try to find your web pages when a visitor wants to view them. The usual directory is public_html or www. Your ISP should have told you the name of this directory.

Port Number

The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

Time-out

The Time Out time determines how long HotDog tries to log on to your server.

Keep Connection Active

The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You probably wouldn’t want this option if your Internet connection is pay per minute.


frmFTPServer context help and frmServerWizard


Default Remote Directory
Default Directory

This is the directory your server looks in to try and find your web pages when a visitor wants to view them. The usual directory is public_html or www. Your ISP should have told you the name of this directory.

  Overview


Port Number

The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

  Overview


Timeout
Time-out

The Time Out time determines how long HotDog tries to log on to your server.

  Overview


Keep Connection Active

The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You probably wouldn’t want this option if your Internet connection is pay per minute.

  Overview


Login Name
Login

Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). Basically, your Login name and password uniquely identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

  Overview


Password

Enter your Password. Your password is provided by your ISP.

  Overview


Server Name

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

  Overview


Server Address
Sever Address

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, a server address might be, www.woodnet.com

  Overview


Server Name

Enter the name of your server. This name should be something meaningful, to remind you which server you are using.

  Overview


Sever Address

Enter the server address. The Server is the computer that you connect to when you want to browse the Internet, it also displays your web pages to anyone who visits your WebSite. For example, a server address might be, www.woodnet.com

  Overview


Login

Your login name is given to you by your ISP (Internet Service Provider- the company that gets you connected). Basically, your Login name and password uniquely identify who you are when it comes to uploading your work. ISP's don't want anyone uploading to their Server!

  Overview


Password

Enter your Password. Your password is provided by your ISP.

  Overview


Default Directory

This is the directory in which your server looks to try to find your web pages when a visitor wants to view them. The usual directory is public_html or www. Your ISP should have told you the name of this directory.

  Overview


Port Number

The usual Port Number is 21. Don’t change this default value unless your ISP tells you to do so.

  Overview


Timeout
Time-out

The Time Out time determines how long HotDog tries to log on to your server.

  Overview


Keep Connection Active

The Keep Connection Alive option keeps the connection to your server active, even when you are not uploading or downloading any data. You probably wouldn’t want this option if your Internet connection is pay per minute.

  Overview


Internet File Properties dialog

The Internet File Properties dialog gives you information regarding a file on your server. This information includes the file size, and file permissions.

File Permissions are a way of defining who can read (that is view) and or write to your file. These file permissions are usually set to allow other people (group) to read your file. In most cases you will never have to touch these settings.

What do you want to do?

 Display the Internet File Properties dialog.


Display the Internet File Properties dialog.

  First open the Internet Files manager:

1	On the View menu, select the Resources submenu.

2	In the Resources submenu, click on Internet Files.

3	Open an Internet Connection by clicking on one of the server icons.

4	Right click on an Internet file and select “Properties”.

  Related Topics


Beginners Guide to FTP

This tutorial will explain to you all the terms and concepts you need to know to feel comfortable with the whole idea of putting stuff on the Net. With this background behind you, you will be able feel confident tackling any FTP program (well, you may not know what the buttons are but you will know what you want to achieve).

FTP  -  File Transfer Protocol.

This is a long name for a simple concept. To transfer files over the Net, the computer sending and the computer receiving the file must be speaking the same lingo. This lingo specifies how the files are to be passed from computer to computer.  This lingo or protocol is called (in a rather self-referential manner) a File Transfer Protocol (FTP). The actual mechanics of how the files are passed is not important right now.

What is a Server?

The Server is a computer that is actually connected to the Internet. Apart from this, there is nothing all that special about a Server. The Server is can be almost any computer, and the operating system it uses is usually UNIX or Windows NT.

What is a Browser?

A Browser is the software you use to surf the Net. Put simply, Netscape is one, Mosaic is one, Microsoft Internet Explorer is one and a 6:30 train to LA is not one at all.

What is a URL?

A URL can give the address of any Web page on the Net. A URL stands for (rather unenlighteningly) Uniform Resource Location. All this means is that there is a unique URL for every Web page on the Net. The Uniform bit refers to a protocol again. URL’s typically look like this:

http://www.sausage.com	Sausage Software’s Home Page.

http://www.netscape.com	Netscape’s Home Page.

http://altavista.digital.com	Altavista’s Home Page (a search engine).

Just type the URL into your browser and away you go.

What is a Web Page?

A Web page is a document that you create using HotDog Express. The language they are written in is called HTML. The address of your Web page is partially dependent on the name to which you save your HTML file and partially dependent on the name of your Server.

There is a special Web page called index.htm. You may have noticed during your travels that you don’t have to type the full address of an HTML page. For example, if you were to look at Sausage Software’s Home Page, you need only type http://www.sausage.com, and not, http://www.sausage.com/welcome.htm. This is because there is some shorthand going on. If you ask for no web page at all, the server automatically returns a Web page called index.html or index.htm

Because of this it is convention to have the index.htm page as your welcome page. So you should name the welcome page index.htm  This way, when people come surfing to your WebSite, they need only type (say) http://www.surfnet.com/~yourname and not http://www.surfnet.com/~yourname/index.htm

How does the Internet actually work.

The Internet is one serious amount of computers connected together. The most important aspect of these linked computers is the ability to get information from one computer to another.

So what actually happens when you surf.

1)  First off, you type a URL into your browser,

http://www.surfnet.com/~elisefowler/welcome.htm

2)  Your computer sends out a message to the server called www.surfnet.com asking for the Web page called welcome.htm  belonging to elisefowler.

3)  Elise Fowler’s server then looks in a special directory that Elise uses for her Web pages. The server is looking for a file called welcome.htm. If this file can not be found, a message is returned to your Browser. This message is usually along the lines of ‘URL not found’.

4)  Assuming the file welcome.htm is found, then this file is copied from Elise’s server to your server and then on to your personal computer. You can now view the contents of Elise’s welcome.htm file using your Browser.

The key points to notice here are:

•	Εvery server has a unique name.

•	Your server looks in a particular directory for your Web pages.

So now the entire functionality of the ‘Upload’ FTP program can be explained. You are simply being asked for the answers to the following questions:

a) Which server do you want to upload your files to?

b) Which directory on that server to load your files into?

c) Which files do you want to upload?

If you keep this in mind when using FTP for the first time, the prospect will seem much less daunting.

Finally, if you don’t know the answer to any of the above questions there is one person that can certainly help you out, your friendly ISP (Internet Service Provider). Your ISP is in charge of your server and they know all the answers to your queries.

So send your ISP an e-mail with the following questions (the e-mail address is usually help@ etc.):

Hi,

I want to upload some files to the server with the aim of putting them on the Net.

I need to know the following:

What is the address of my server?

What directory should I upload these files to?

What URL would I use to view my index.htm file once I have uploaded it?

Thanks for your time

Regards,

To upload your web documents, you have to make them part of a WebSite. For more details, see the WebSite Manager .

  Related Topics


Internet Files Manager
Internet File Manager

Using the Internet File Manager you can easily upload and download files to and from your server. Some of the features of the Internet File Manager include remote creation and deletion of directories on your server. Just right click over your server to create, rename or delete directories.

What do you want to do?

 Open the Internet File Manager.

 Start the Create New Internet Connection wizard to specify the address of a server.

 Open a connection to a server.

 Upload or download files.

  Related Topics


Open the Internet File Manager

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Internet Files”.


Upload or Download Files
Uploading or Downloading Files

Open both the Local File Manager and the Internet File Manager. Use the upper directory half of each manager to navigate to the directory you want to copy from and download/upload to.

Uploading Files
From the file section of the Local File Manager  drag the files you want to upload to the files section of the Internet File Manager.

Downloading Files
From the files section of the Internet File Manager to the files section of the Local File Manager.


Create a connection to your server
Open a connection to your server

  To begin with, open the Internet Files Manager:

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Internet Files”.

Double click your server name to open a connection.

In this example, if you wanted to open the Sausage Software Server, you would double click the text ‘Sausage Software’

The following colors are used to indicate the state of your server folders:

  This folder’s contents are currently being checked.

  This folder’s contents are known.

  This folder has yet to be opened.

Now you have established a connection to your server, use the Explorer type interface to navigate around. Copying files is as easy as drag and drop.


Server Message Box

This window displays all the messages that the HotDog sends the server and the server sends HotDog. An advanced user might find these messages useful if connecting to a non-familiar server.

  Overview


Servers and Directory Lists

This list displays all the currently defined server connections.

  Double click on a server name to open it.

Once a server has been opened, the list displays all the directories in that server.

  Double click on a directory to open it.

Tip

Right click on a directory to create or delete directories.

  Overview


File Lists

This list contains all the files in currently opened server directory.

  To download a file do one of the following:

•	Drag the file into the Local File Manager.

•	Right click on the file and select Download.

Tip

Right click on a file to rename/delete/view/download it.

  Overview


Macro Manager

Macros are an easy way of inserting commonly used tags and text into HotDog. For example, a simple table may form part of your logo. Just make this table a Macro, and then you need only double click on the Macro, to insert your table. Macros can also be added to the Toolbars, for ease of use.

What do you want help on?

 Opening the Macro Manager.

 Using a Macro.

 Creating Macros.

 Deleting Macros.

 Editing Macros.

 Adding Macros to a Toolbar.

  Related Topics


Opening the Macro Manager.

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Macros”.


Using  Macro's

  To begin with, open the Macro Manager:

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Macros”.

Double click on the [image] icon.

The list that appears shows all the Macros you have created.

  To insert a Macro into your document do one of the following:

•	Double click on the Macro,

•	Highlight some text, then double click on the Macro you want to insert.


Creating a Macro

  To begin with, open the Macro Manager:

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Macros”.

3	Click ‘Add New Macro’.

4	Give your Macro an easy to remember name.

5	Enter the text that you want to appear before any selected text in the ‘Text to enter before selected text’ box.

6	Enter the text that you want to appear after any selected text in the ‘Text to enter after selected text’ box.

7	Click OK to save your Macro.

Keyboard Shortcuts

You can create a keyboard shortcut for your Macro:

Decide on a keyboard combination to activate your Macro.

For example, if you wanted to use ALT - SHIFT - K to activate your Macro,

1	Check the ALT box.

2	Check the SHIFT box.

3	Enter K into the letter box.

4	Click OK.

This sets the a keyboard combination to your Macro.


Deleting a Macro

  To begin with, open the Macro Manager:

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Macros”.

3	Right Click over the Macro you want to delete and select “Delete Macro”.

  Related Topics


Edit Macro

  To begin with, open the Macro Manager:

1	On the View menu, select the submenu “Resources”

2	In the Resources submenu click on “Macros”.

3	Right Click over the Macro you want to edit and select “Edit Macro”


Macro Listing

This window displays all the Macros you have created. Double click on a Macro to insert it into your document.

  Overview


Shortcut Key

Use shortcut keys as a quick way of inserting Macros into your document.

 To define a shortcut key for a Macro:

1	Click on the Macro you want to add a shortcut key to.

2	Select the ALT, CTRL, SHIFT and key combination you want to use for the shortcut.

3	Click OK.

  Overview


Clear

This button removes the shortcut key from the currently selected Macro.

  Overview


frmEditMarco context help


Macro Name

Each Macro created must have a unique name. Try to name your Macros something meaningful.

  Overview


Text before selected Text

When inserting a Macro into a document, this text will be inserted before the currently selected text. If no text is selected, this text will be inserted before the cursor.

  Overview


Text After selected Text

When inserting a Macro into a document, this text will be inserted after the currently selected text. If no text is selected, this text will be inserted after the cursor.

  Overview


Supertoolz

xxxx null topic


 Install a new Supertool (easy!!!)

xxxx xxxx null topic


 Check that you have the latest versions of our products.

xxxx null topic


 Open the SuperTool Resource Manager.

xxxx null topic


frmMain_STL_SuperTool_List


 SuperTool List

xxxx null topic


Extended Character Manager

Not all the symbols you want to use in HTML are represented, for instance, how do you insert a ‘>’ or ‘<’ without it representing the beginning or ending of a tag? What about unusual characters such as ™ or © ?

HotDog gives you a solution with the Extended Character Manager. Simply double click on the character you want to insert and it’s inserted into HotDog. Easy. Furthermore, you can tell the Extended Character Manager to insert the character (™) as HTML code. Generally insert the character as is, it makes your web document more readable. When you go to upload your document, HotDog will automatically translate the characters to HTML.

What do you want to do?

 Display the Extended Character Manager.

 Insert an Extended Character into a your document.

 Options regarding the Extended Character Manager.

  Related Topics


Display the Extended Character Manager

1	On the View menu, select the “Resources” submenu.

2	In the Resources submenu click on “Extended Characters”.


Insert an extended character into a web document
Insert an Extended Character into your document

  First open the Extended Characters manager:

1	On the View menu, select the “Resources” submenu.

2	In the Resources submenu click on “Extended Characters”.

  On the Extended Character Manager Window, double click on the character you want to insert into your document.


Automatically Convert Extended Characters on Insertion into document

  To convert all extended characters into their HTML codes:

1	On the Format menu, select the “Convert Document” submenu.

2	On the “Convert Document” submenu, click on “Convert Extended Characters”.


Netscape Bookmarks and Internet Explorer Favorites

HotDog will try and automatically find your Netscape Bookmarks and Internet Explorer Favorites. If you want to insert a link to one of your favorite WebSites, just drag the link into your web document and it will be automatically inserted. You can change which links HotDog displays by clicking the drop down box at the top of the Bookmarks / Favorites Resource Manager and selecting the link types you want.

What do you want help on?

 Opening the Bookmarks / Favorites Resource Manager.


 Setting up browsers for easy use with HotDog. xxxx


Opening the Bookmarks / Favorites Resource Manager.

1	On the View menu, select the “Resources” submenu.

2	In the Resources submenu click on “Bookmarks / Favorites” manager.


Internet Explorer Favorites
Internet Explorer and Netscape Bookmarks

This list contains all your bookmarks and favorites. To change from the Netscape Bookmark list to the Internet Explorer list, use the drop down list above. To insert a link into your document, just drag it across.

  Overview


Tags List
HTML Tag Manager

The Tag manager gives you an easy way to insert HTML tags into your Web documents. However, the Tag Manager also comes with some powerful features. For example, different browsers support different tags. The Tag Manager can color tags that are browser dependent a different color to your standard tags. This means you can easily spot tags that may cause trouble to visitors to your site. Furthermore, you can define your own tags and give them their own color!

What do you want to do?

 Start the Tag Manager.

 Limit syntax checking to particular HTML specifications.

 Use the Tag Manager to insert tags into your document.

 Color Tags

 Define your own tags.

  Related Topics


Start the Tag Manager
Start the Tag Manager.

1	On the View menu select the “Resources” submenu.

2	In the Resources submenu click on “HTML Tags”.


Limiting syntax checking to particular HTML specifications.

  First open the Filter Tags dialog:

1	Near the bottom center of the HotDog window, click the “Tags Filter” button.

2	Select the Syntax Files you want HotDog to use when checking your document.

  Related Topics


Using the Tag Manager to insert tags into your document.

  First start the HTML Tag manager:

1	On the View menu select the “Resources” submenu.

2	In the Resources submenu click on “HTML Tags”.

3	In the HTML Tag Manager, click once on the tag you want to insert.

4	Drag the tag to your document.

5	Drop the tag over the point where you want to insert it.

There are two different views you can use to describe tags, alphabetical or hierarchical. Alphabetical just displays all the tags in the tag list.

Tip

If your cursor is already in the correct position in your document you can just double click on a tag to insert it.


Coloring Tags

All your tags can have different colors. For example, all the table tags could appear in orange. The benefits are clear. You can keep track of your document layout with a glance instead of having to read different tags.

  First start the HTML Tag manager:

1	On the View menu select the “Resources” submenu.

2	In the Resources submenu click on “HTML Tags”.

 To change the color of just one tag (such as the TD tag):

1	In the Tag Manager, click on the <TD> tag.

2	At the bottom of the tag manager, select the color you want the tag to appear.

The box next to the tag will now reflect the color you have chosen.

To display the colored tags on your document, click the ‘<a> Tag’ button at the bottom of your document.


Syntax File Manager

All of the HTML tags and their associated attributes, value types and popup help sentences are stored in syntax files. We have created different syntax files for all the different specifications of HTML. For example, the current standard for HTML is 3.2 with most browsers providing partial support for HTML 4. When you design advanced web pages, you have to be certain how your web page looks and acts under different browsers. By using different HTML syntax files to check your document, you can gain a fair indication of how your document will look and perform under different browsers. If you were creating a web page that was optimized for Netscape, you would use HTML 3.2 and Netscape extensions. This would mean that any tag you used that was not part of the HTML 3.2 or Netscape extension would be highlighted in red. In other words - Netscape would not support that tag.

If you have defined your own tag using style sheets or have tags specific to your company then HotDog will not recognize them. To rectify this we have provided a Syntax File editor. This small program lets you open and edit HotDog’s current syntax files and also create your own. Any new syntax definitions you create are usually stored in the ‘users.stx’ file, unless you specify otherwise. If the users.stx syntax file is one of the syntax files being used to check your document, the HTML Property Sheet and the HTML Tags manager will be automatically updated with your new tags.

What do you want to do?

 Open the Syntax File Manager.

 Set which Syntax Files should be used to check your document.

 Create and Edit a new Syntax File.

  Related Topics


Open the Syntax File Manager

  First start the HTML Tag manager:

1	On the View menu select the “Resources” submenu.

2	In the Resources submenu click on “HTML Tags”.

Now open the Syntax File Manager:

3  On the top left of the HTML Tags Manager click “Add/Edit Tags”


Defining your own Tags.

If you have created your own tags using style sheets or just need to define an unusual tag, then you will need to add a tag to the ‘User Defined Tag list’.

  First start the HTML Tag manager:

1	On the View menu select the “Resources” submenu.

2	In the Resources submenu click on “HTML Tags”.

Now open the Syntax File Manager:

3  On the top left of the HTML Tags Manager click “Add/Edit Tags”

You can edit HotDog’s current syntax tags or create your own.

To load a Syntax File for editing:

Click the Load Syntax File Button.

To Create a new Syntax File:

Click the New Syntax File Button.

For a step by step example of add an HTML tag to the syntax manager, see the tutorial below.

 Example of adding a new tag.

  Related Topics


Example of adding a new tag.
Example of adding a new tag to the Syntax Manager

To make a new heading tag <HEADER> with the following attributes:

ALIGNMENT = LEFT|RIGHT|CENTER    (Enumerated value)

SIZE=Integer

REF=URL (i.e., location of a file (say))

Remember:  This HEADER tag will not do anything to your browser. All you are doing is making HotDog accept the HEADER tag as valid syntax. The Syntax Tag Manager is mainly used by companies that have their own Tags defined for use by their custom browsers.

Step 1. Open the Syntax File Manager

Open the HTML Tag Manager

  On the View menu, select Resource Manager, HTML Tags.

Click the ‘Add/Edit Tags’ button

Step 2. Load the User Tags Syntax File

1	Click the Load Syntax File Button, [image].

2	Double click the ‘user.stx’ file.

This opens the user defined syntax file ready for editing. If you haven’t already defined some of your own tags, the syntax file will be empty. However, the ‘Syntax File Description’ (on the top right of the Syntax File Manager) will read ‘User Defined’.

Step 3. Set the Syntax File Description

The Syntax File Description appears in the tag filter.  It allows easy identification of your syntax files.

Step 4. Creating a Attribute Template

Attribute Templates are lists of attributes that you commonly use. For example, the ALIGN=”LEFT|RIGHT|CENTER” is a common attribute. Rather than re-typing this attribute all the time, you can define it once and just drag it across to your Tag. In this example, you are going to create an ALIGN attribute template.

To begin, create a dummy tag to hang all your attributes off.

Click on the Attribute Templates window.

Click on ‘New Template’.

Under ‘Name’ enter: ‘DUMMYTAG’.

Click ‘Add >>’.

Now add the ALIGN attribute to this tag.

In the Attribute Templates window, click on DUMMYTAG.

Click on ‘Add Attribute’.

Under ‘Name’ enter: ‘ALIGN’.

Under Type click ‘Enumerated’.

Click ‘Add >>’.

This adds the ALIGN attribute to the Attribute Template. Now add some values to the attribute.

Click on the ALIGN attribute in the Attribute Templates window. This brings the ALIGN attribute to focus.

Click ‘Add Enum Value’.

Under ‘Name’ enter ‘LEFT’.

Click ‘Add >>’.

Click on the ALIGN attribute in the Attribute Templates window. This brings the ALIGN attribute to focus.

Click ‘Add Enum Value’.

Under ‘Name’ enter ‘RIGHT’.

Click ‘Add >>’.

Click on the ALIGN attribute in the Attribute Templates window. This brings the ALIGN attribute to focus.

Click ‘Add Enum Value’.

Under ‘Name’ enter ‘CENTER’.

Click ‘Add >>’.

This completes the construction of the ALIGN Template. A description of its use is below.

Step 5. Defining the description of the attributes

When using HotDog you will have noticed that when you hold the mouse over a tag or attribute, a description of that tag or attribute pops up. You can create your own descriptions here. For example, when a users holds the mouse over your ALIGN tag, you could pop up a message: ‘Aligns the header left, right or center’.

To do this:

Click on the ALIGN attribute in the Attribute Templates window.

In the description box, enter ‘Aligns the header left, right or center’.

Step 6. Adding the HEADER Tag

Now it is time to add the HEADER tag to your syntax list.

Click on the Syntax File Tags window.

Click ‘New Tag’.

Under Name type ‘HEADER’.

Click ‘<< Add’.

Step 7. Adding the Align Attribute

Adding the ALIGN Attribute is easy.

In the Attribute Templates window, click and drag the ALIGN attribute to the HEADER tag in the Syntax File Tags window.

The ALIGN attribute is automatically entered into the HEADER tag.

Step 8. Adding the Size Attribute

Click the HEADER tag in the Syntax File Tags window.

Click ‘Add Attribute’.

Under ‘Name’ type ‘SIZE’.

Under ‘Type’, select ‘Integer’.

Click ‘Add <<’.

This means HotDog will only recognize integer values for the SIZE attribute.

Step 9. Adding the REF attribute

Click the HEADER tag in the Syntax File Tags window.

Click ‘Add Attribute’.

Under ‘Name’ type ‘REF’.

Under ‘Type’, select ‘URL’.

Click ‘Add <<’.

This means HotDog will only recognize a URL value for the Cap attribute.

Step 10. Saving the updated syntax file.

Click the Save button at the top of the screen.

Congratulations!!! -- You have now completely defined your own tag.

Open a new document, and type the HEADER tag. HotDog will recognize it!!!

If you are using the HTML Property Sheet or the HTML Tags Manager you will notice that your tag’s attributes are ready to go.

  Related Topics


frmSyntaxManager context help


Syntax File Description

Each Syntax File (including files you create) appear in the “Tags Filter” dialog. The description you enter here will be used to specify the name of your syntax file in the “Tags Filter” dialog.

  Overview


New Tag

Click this button to create a New Tag. Enter the name of the new tag into the “Name” box below. Then click “<< ADD” to add your new tag to a syntax file. The next step is adding attributes to the tag.

  Overview


New Attribute

 To add a new attribute to a tag:

1	Click on a tag in the Syntax File list.

2	Use the Name, Type and Description boxes to define it’s properties.

 To edit an attribute:

1	Click on an attribute in the Syntax File list.

2	Use the Name, Type and Description boxes to change it’s properties.

  Overview


Syntax File List

This window that lists all the different syntax specification HotDog can check. Just click on a syntax specification to activate checking for it.

  Overview


Attribute Templates

Some attributes are used very frequently as part of tags. For example, the ALIGN=”LEFT|RIGHT|CENTER” is an attribute of many different tags.

 To use an Attribute Template:

1	Click on the tag you want to add an attribute template to.

2	Drag an attribute from the “Attribute Template” list to your tag.

  Overview


Add Enumerated Value

An Enumerated Value is the name of the type given to values that can only be specified text values. For example, ALIGN=”LEFT|RIGHT|CENTER”. Here the only values the ALIGN attribute can have are “LEFT”, “RIGHT” and “CENTER”. These values are called Enumerated Values.

  Overview


Delete

Click on the Tag or Attribute you want to delete and click “Delete”. Remember, if you delete a tag all the attributes you have already defined for that tag will also be deleted.

  Overview


Name

This is name of the Tag or Attribute you are defining.

  Overview


Type

A type is the class of value that can be used with an attribute. An attribute can have anywhere up from zero attributes. For example, if your tag was used to define the width or height of some object, the sort of values it can use are integers and/or proportional sizes (30%). In this example you would choose “Proportional Integer” as the value type.

  Overview


Description

The Tag or Attribute Description appears when a user leaves their mouse over your tag or attribute in the editor.

  Overview


Closing Tag Required

Some tags require a closing tag (e.g. <BODY> ) while others don’t ( <B>). This checkbox lets you define whether the tag you are creating needs a closing tag.

  Overview


Add Color

Click this button to add a new color to a syntax file.

  Overview


Edit HTML Tags

This button opens the “Syntax File Manager” dialog. This dialog lets you edit and define your syntax files.

  Overview


Edit Defined Colors

This window lets you create new defined colors. For example, if you ever wanted to HotDog to recognize the color “PUCE” then you need to tell it that puce is a valid color using this dialog.

  Overview


List of All Tags

This window contains all the tags and their attributes for the Syntax File you loaded. To edit a tag or its attributes, click on it and use the Name, Type and Description boxes to change it’s properties.

  Overview


New Color

Click this button to begin defining a new color. Use the “Name” and “Color” box below to choose a name and color for your new color.

  Overview


Color Name

Use this box to define a new name for your color. Use the “Color” box below to choose a color for your new color.

  Overview


Select Color

Use this box to pick a new color for your color. Use the “<< Add” button below to add your new color to the color list.

  Overview


Add

Use the “<< Add” button below to add your new color to the color list.

  Overview


Color List

This list displays all the defined colors that HotDog recognizes.

  Overview


Multiline Clipboard

When working with a few documents it is convenient to be able to store a few pieces of different text. The Multiline clipboard is a floating clipboard that can store as much text and colors as you need. Just drag in any text you want to save and drag out any text you want to paste into your document.

What do you want to do?

 Open the Multiline Clipboard Manager

 Insert some text into the multline clipboard

 Paste some text from the multiline clipboard into your document


Open the Multiline Clipboard Manager

1	On the “View” menu select the “Resource Manager” submenu.

2	In the “Resource Manager” submenu click on “Multiline Clipboard”.


Insert some text into the multline clipboard

  First open the Multiline Clipboard:

1	On the “View” menu select the “Resource Manager” submenu.

2	In the “Resource Manager” submenu click on “Multiline Clipboard”.

  Highlight some text in your document and drag it into one of the free rows in the Multiline Clipboard.


Paste some text from the multiline clipboard into your document

  First open the Multiline Clipboard:

1	On the “View” menu select the “Resource Manager” submenu.

2	In the “Resource Manager” submenu click on “Multiline Clipboard”.

  From the Multiline Clipboard, drag some text into your document.


Number of Clipboard Lines

Each clipboard line takes memory. Because of this you can define how many lines of text you can store in the clipboard. Typically about 10 to 20 lines is all you would ever need.

  Overview


Inserting/Removing Clipboards Items

 To insert text into the Multiline Clipboard:

•	Highlight some text in your document, copy it and then paste it into one of the free rows in the Multiline Clipboard.

 To paste text from the Multiline Clipboard to a document:

•	From the Multiline Clipboard, drag some text into your document.

 To delete text from the Multiline Clipboard:

•	Right click over the text you want to delete and select “Delete”.

  Overview


Hiding or displaying Resources
Hiding or Displaying panels

When a panel is docked, it is on either the left or right side of the HotDog window.

Undocking a Window:

1	Click and hold the mouse on the top of the panel.

2	Drag the window to somewhere near the center of the screen.

3	Let it go. The panel is now floating.

Docking a panel:

1	Click and hold the mouse on the top of the panel.

2	Drag the panel to the left of right side of the HotDog window.

3	Let the mouse go and the panel will automatically dock.

Re-sizing a floating panel:

1. Click and hold the mouse over the ‘paw’ on the panel you want to resize. 2. Resize the panel by dragging it to the required size. 3. Let the mouse go and the panel is resized.

Rolling up or Unrolling a panel:

To keep your desktop tidy, floating panels can be rolled up and down. To roll up a panel, just click on the top of the panel once.

Opening any Manager.

Instead if using the View, Resource Manager menu to open any manager from the Resource Manager, you can right click over the title banner of any manager for a quick menu with all the different Managers listed.

Viewing Resource Panels as tabs:

1	Right click on any “Resources” panel.

2	Select “Tab Visible On Left/Right side”.

Presets

HotDog also comes with some commonly used Resource Manager Presets. For example, if you do a lot of uploading, then you would tend to have the Local and Internet File managers open.

  To select a preset:

1	Right click on the “Resources” button at the bottom center of the HotDog window.

2	Select the preset you want to use.

  Related Topics


Other Stuff on frmMain.

frmMain Full Screen


frmNewOptions


Preferences - Overview

You can customize just about anything in HotDog. If you use an editor for a long period of time you have to be able to adjust the look and feel of the editor to your own needs. The Preferences window lets you change how HotDog operates.

What do you want to do?

 Open the Preferences Dialog.

 See help on one of the Preference Windows.


Open the Preferences Dialog.

On the Edit Menu, click on “Preferences”.


General Preferences

Allow only one instance of HotDog to be run at one time

Check this option to limit HotDog to only one runable instance of itself at any one time. However, even with this option checked, multiple instances of HotDog can be run if the ‘/m’ command parameter is used. eg HotDog5.exe /m.

Open a new document on Startup

Each time you start HotDog, a new document ready for editing can be automatically created.

Restore last session on Startup

Any documents you had open last time you closed HotDog can be automatically re-opened when you start HotDog.

Autosave every xx minutes

In case your computer crashes, HotDog can automatically save your work at a specified interval. Use this option to tell HotDog how often to save your documents. About 5 minutes is a good number. Remember to set an Auto-Save directory for your files to be saved to.

Undo/Redo level

HotDog supports almost unlimited Undo/Redo level. However, to save on memory you can force HotDog to remember only a few levels of undo.

Create Backup files

HotDog can automatically create backup files for you. These files have a ‘bak’ extension. Each time you save a file, your penultimate save is saved as the backup. This is useful for those rare occasions when you accidentally save over a file you wanted to keep.

Refresh external browser on save

When you save your document, your external browser can be automatically refreshed. This option is useful when you are working a large file with many saves.

File Dialogs use current directory

Whenever you attempt to save or open a file, the file dialog can display the default directory for your task (as specified by the directories preferences or the directory that you last used.

File Dialogs with a File Preview Window

If you want a quick preview of your files when opening documents check this option.

  Related Topics


General Preferences
General Preferences - File Filters

Current Filters

This is a list of the different filter groups HotDog recognizes. For example the “All Graphics” group might contain the following file extensions: *.jpg, *.jpeg, *.gif etc. Use the Add and Remove buttons to add or remove a Filter Group from the Current Filters list.

Filter Description

The Filter Description shows each of the file extensions residing in a Filter Group. Use the Add and Remove buttons to add or remove a file extension to a selected file group.

  Related Topics


Environment Settings
General Preferences - Environment Settings

HotDog Sound FX

Check this option to make HotDog play its various sound effects.

Animated Waiting Cursor

Check this option to use an animated waiting cursor. (It looks cool).

Use Background Color

Click on the color board to select the color that will form the background color of the HotDog desktop.

Use Background Image

Check this option and select a picture to use as the HotDog desktop background.

  Related Topics


Editor Preferences
Editing Window

Drag ‘n’ Drop Text Editing

To move and copy text by dragging the selection with the mouse, select the Drag-And-Drop Text Editing check box.

Insert <P> as container

With this option checked, when you insert a <P> tag, HotDog will automatically insert a </P> for you. (The </P> tag ending is optional in HTML).

Show Hidden Fields

Checking this option will make all the hidden characters, such as tabs, spaces, carriage returns etc. appear in your document.

Auto Indent

Positions the cursor under the first nonblank character of the preceding nonblank line when you press Enter.

Word Wrap

To wrap the text from one line to the next within the document window, select the Word Wrapping check box.

Tab Size

You can tell HotDog how many characters a tab should indent.

Print Margin

You can define the position of the print margin here.

Show Print Margin

This option displays the print margin. The print margin shows the width of the printed page. If you work within the print margin, when printing, your text will appear exactly as you see it on your screen.

Smooth Scrolling

When you press the ‘Enter’ key, HotDog will move the text below your cursor down the page in such a distinctive style that your editor gains a sophisticated air and will make you the envy of all your friends.

Maximize documents when opened

When a new document is opened, HotDog can automatically maximize the document.

Show Gutter

With this option checked the Gutter is displayed, allowing for insertion of bookmarks and line numbers.

Show Paws

Displays a picture of dog paws in the gutter.

Show Line Numbers

Limits how room is in the gutter for the purpose of displaying line numbers.

  Related Topics


Editor Preferences,  Appearance
Editing Window,  Appearance

Editor Font

The editing window in HotDog can display all mono-spaced fonts. Inside this limitation you can choose any font you want.

Font Size

To change the size of the text in the editing window of HotDog, use the text size menu.

Text Color

Selects the color of the editor text.

Background Color

Selects the color of the editor background.

  Related Topics


Editing Window, Syntax Colors

You can set all the colors in the HotDog editor with this window.

Just select the element (eg, text) you want to color. Remember, you can change the background color as well.

  Related Topics


Editor Preferences, HTML Specific
Editing Window, HTML Specific

Syntax Highlighting

If you want all your HTML tags will to appear highlighted, so as to appear separate from the text in your document, select this option.

Tag Coloring

Makes all your HTML tags can appear in a different color.

Error Tooltips

Checking this option will make balloon help available when you mouse over any incorrect HTML tag.

HTML Tooltips

HotDog can provide you with interactive HTML tooltips. Just move your over any HTML tag, and HotDog will give you a brief description of its functionality.

Images as Tooltips

When you hold the mouse over an image tag, HotDog can display the referenced image in a tooltip screen. This is useful way of reminding yourself what the image looks like.

Colors as Tooltips

When you hold the mouse over the HTML code for a color, HotDog will display the true color as a tooltip. For example, if the mouse is held over #888888, the tooltip will show a grey box.

Use Emphasis Tag instead of Italic Tag

Use the <EM> tag to display slanted text instead of the <I> tag.

Use Strong Tag instead of Bold Tag

Use the <STRONG> tag to display heavy text instead of the <B> tag.

  Related Topics


Editor Preferences, File Types
Editing Window, File Types

Default Document Extension

Each HTML file you save can have whatever file extension you wish. The most common is .HTML, however some users prefer .HTM

Default Backup Extension

You can define the file extension of your automatic backup files.

Open Specific files in HotDog

The files shown in the file list are all files that HotDog opens ready for you to edit. You can, if you wish add or remove file extensions to this list using the Add or Remove button.

  Related Topics


Editing Window - Code Completion

Automatically Close Tags

When a ‘<’ is typed, HotDog automatically places as ‘>’ after the cursor.

Enable Code Completion

Code completion comes in three varieties:

Passive

Code completion is only activated when CTRL-H is pressed.

Tag Active

Code completion is activated whenever ‘<’ is typed.

Active

Code completion is activated after a set delay (set using slider bar).

  Related Topics


Preferences, Rover

To edit any Editor Preferences,

1	On the Edit menu, click on Preferences.

2	On the Preferences Window, double click on ‘Rover’.

ROVER is enabled

Check this option to enable HotDog’s ROVER. Use the drop down list to select the browser you want to use to preview your work.

Rover Activated on Start Up

Loads ROVER when HotDog is first started.

Display Ruler by Default

Displays ROVER’s ruler by default.

Refresh ROVER after xx seconds

ROVER is HotDog’s built in browser. ROVER can update any changes you have made to your document at various rates defined by this option.

Refresh ROVER when saving a document

ROVER can be automatically refreshed (that is updated) whenever you save a document.

Refresh rover when inserting tags

Each time you insert a tag into your document, ROVER can automatically refresh your work.

Disable Rover for documents over xx Kilobytes

For larger documents, the refresh rate of ROVER might be too slow. You stop ROVER from automatically refreshing for large documents with this option.

  Related Topics


Preferences, Directories

The Preferences you set here do not override the preferences you set for websites . These settings are for documents not part of any WebSite.

Documents

Whenever you save an HTML file, HotDog will present you with a default directory for storing your files. Using this option you can control which directory will be used to store your documents.

Templates

Whenever you save a template file, HotDog will present you with a default directory for storing it. Using this option you can control which directory will be used to store your templates.

Graphic Images

Whenever you save an image file, HotDog will present you with a default directory for storing it. Using this option, you can control which directory will be used to store your graphics.

Published Files

Should you choose to publish your files to a directory, they will be published to the directory specified here.

  Related Topics


Preferences, Browsers

To edit any Editor Preferences,

1	On the Edit menu, click on Preferences.

2	On the Preferences Window, double click on ‘Browsers’.

Add/Remove Browsers

For HotDog to be able to preview your documents using an external browser, you have to specify where your external browsers are located. To do this:

1	On the ‘Edit’ menu click Preferences.

2	Click on Browsers.

A window will be displayed showing each of the external browsers HotDog knows about.

1	To add a browser click Add.

2	Enter the description to be linked to the browser. For instance, if you were entering the path to Netscape 2.02 you might describe it as ‘Netscape ver 2.02’.

3	Enter the path to the browser. The simplest way of doing this is to click the browse button (the open folder icon) and find the directory that contains Netscape 2.02. Alternatively, you can get HotDog to automatically find as many browsers on your computer that it can.

4	Click OK.

To edit a browser click Edit.

Make any changes you need (such as updating the location of a browser on your hard drive), then click OK.

To remove a browser,

1	Click over the browser in the browser list.

2	Click Remove.

Automatically Search for Browsers

Just click the ‘Search’ button and HotDog will attempt to automatically detect all your browsers. Usually this procedure will work first time. If not, you may have to enter the position of the browsers manually using the method described above.

  Related Topics


Preferences, Dictionaries

Select the type of dictionary you want HotDog to use.

  Related Topics


Preferences, Save/Start

To edit any Editor Preferences,

1	On the Edit menu, click on Preferences.

2	On the Preferences Window, double click on ‘Save/Start’.

Autosave every xx minutes

In case your computer crashes, HotDog can automatically save your work at a specified interval. Use this option to tell HotDog how often to save your documents. About 5 minutes is a good number. Remember to set an Auto-Save directory for your files to be saved to.

Create Backup files

Whenever you make a change to a HTML document you can make HotDog save a backup. Great for those instances when you click OK then immediately say NO!!!!!!

Refresh external browser on save

When you save a document you may want your external browser to automatically refresh, just so you can be sure you know what you are saving.

  Related Topics


Preferences, Publishing

Note:

  To publish a document:

1	On the Format menu,

2	Click on ‘Publish Document’.

Remove all carriage returns

HTML text without carriage returns appears as one long line. It looks terrible. Should you want your web page source devoid of carriage returns, this is the option for you.

Convert extended characters to HTML codes

If you have used any extended characters in your web document, HotDog can automatically translate them into HTML on publishing.

Replace ‘/’ with ‘\’ in file names

Generally this option should be left checked. It replaces DOS style paths with UNIX style paths.

Tag case

These options let you select in which case your tags will appear.

File Format

You can save your document as a Windows (recommended), UNIX or Amiga file format.

  Related Topics


Preferences, Auto Replace

Replace xx with yy

Use the Replace function if you wish to replace certain words or expressions on publishing (such as build notes etc.).

To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want to be replaced with in the ‘With’ window.

3	Click Replace.

To remove a Replace term:

1	On the ‘With’ window, click on the replace expression you want to remove.

2	Click  Delete.

  Related Topics


File Filters

Current Filters

Filter Description

Environment Settings

HotDog Sound FX

Animated Waiting Cursor

Use Background Color

Use Background Image

Rover activated by default

When you open a new document you can specify which browser view is active, Rover or Web.

Use Internet Explorer as Rover (Internal HTML Preview)

If you have MS Internet Explorer installed on your computer, you can use this browser as your Rover.

Auto Close Tag

As soon as you begin to open an HTML tag by typing the ‘<’ character, it is automatically closed (with the ‘>’ character).

Insert text as pre-formatted <PRE>

Selecting this option ensures that all plain text inserted into HotDog is correctly formatted. When a text document is opened inside HotDog the <PRE> can be used to maintain formatting. Browsers displaying HTML do not display tabs or multiple spaces. The <PRE> displays the text ‘as is’ that is, all tabs are displayed correctly etc.

Skip animation when loading

When HotDog starts the cool dog animation is displayed. You can skip this animation, and HotDog will load slightly faster.

Indent Size

The indent size controls how many characters text is indented.

frmNewOptions Context Help


Drag 'n' Drop Editing

To move and copy text by dragging the selection with the mouse, select the Drag-And-Drop Text Editing check box.

  Overview


Show Hidden Fields

Checking this option will make all the hidden characters, such as tabs, spaces, carriage returns etc. appear in your document.

  Overview


Auto Indent

Positions the cursor under the first nonblank character of the preceding nonblank line when you press Enter.

  Overview


Word Wrap

To wrap the text from one line to the next within the document window, select the Word Wrapping check box.

  Overview


Show Print Margin

This option displays the print margin. The print margin shows the width of the printed page. If you work within the print margin, when printing, your text will appear exactly as you see it on your screen.

  Overview


Images as Tooltips

When you hold the mouse over an image tag, HotDog can display the referenced image in a tooltip screen. This is useful way of reminding yourself what the image looks like.

  Overview


Maximise Documents when Opened
Maximize Documents when Opened

When a new document is opened, HotDog can automatically maximize the document.

  Overview


Show Gutter

With this option checked the Gutter is displayed, allowing for insertion of bookmarks and line numbers.

  Overview


Show Line Numbers in Gutter

Check this option to display the line numbers in the gutter.

  Overview


Tab Size

Set this value to tell HotDog how many characters a tab should indent.

  Overview


Print Margin

Defines the position of the Print Margin.

  Overview


Smooth Scrolling

When you press the ‘Enter’ key, HotDog will move the text below your cursor down the page with such a distinctive style that your editor gains a sophisticated air and will make you the envy of all your friends.

  Overview


Maximun Number of Columns
Maximum Number of Columns

Even with word wrapping off, there is a limit to how long a line is. You can define this length using the Maximum Number of Columns box.

  Overview


Indent Size

The indent size controls how many characters text is indented.

  Overview


Web Browser List

This list contains all browsers that HotDog could find on your system. You can edit the path to each of the browsers by clicking on a browser and then clicking “Add”.

  Overview


Add Web Browser

Usually HotDog will find all the web browsers on your hard drive. However, in the event that it does not you can define the location of your own browsers by pressing the “Add” button and entering the path to your new browser.

  Overview


Edit Web Browser

If for some reason HotDog incorrectly lists one of your browsers, or you want to change the browsers description, click the “Edit” button.

  Overview


Remove Web Browser

If you want to remove a web browser from the browser list click on the browser you want to remove and then press “Remove”.

  Overview


Use Low Memory Documents

A low memory document is one that does not have any of the browsers (WEB and ROV) loaded when you open the new document. To preview your work when using Low Memory Documents, use an external browser.

  Overview


Refresh after xx seconds

ROVER is HotDog’s built in browser. ROVER can update any changes you have made to your document at various rates defined by this option.

  Overview


Refresh when saving document

ROVER can be automatically refreshed (that is updated) whenever you save a document.

  Overview


Refresh after inserting tags

Each time you insert a tag into your document, ROVER can automatically refresh your work.

  Overview


Disable Auto-Refresh for documents over xx in size
Disable Auto-Refresh for documents over xx kilobytes in size

For larger documents, the refresh rate of ROVER might be too slow. You stop ROVER from automatically refreshing for large documents with this option.

  Overview


Rover Activated by Default

When you open a new document you can specify which browser view is active, Rover or Web.

  Overview


Show Ruler

The ruler shows you where the right margin of the web page is in terms of printing. You can display or hide the ruler using this option.

  Overview


Use Internet Explorer as Internal HTML Preview

If you have MS Internet Explorer installed on your computer, you can use this browser as your Rover.

  Overview


Publish to a directory

Should you choose to publish your files to a directory, they will be published to the directory specified here.

  Overview


Remove All Carriage Returns

HTML text without carriage returns appears as one long line. It looks terrible. Should you want your web page source devoid of carriage returns, this is the option for you.

  Overview


Convert Extended Characters to HTML Codes

If you have used any extended characters in your web document, HotDog can automatically translate them into HTML on publishing.

  Overview


Replace '\' with '/' in filenames

Generally this option should be left checked. It replaces DOS style paths with UNIX style paths.

  Overview


Tag Case

These options let you select in which case your tags will appear.

  Overview


File Format

You can save your document as a Windows (recommended), UNIX or Amiga file format.

  Overview


Replace Term

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Replace With

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Term List

All the terms in the Term List will be searched for and replaced when your document (or WebSite) is uploaded or published.

  Overview


Add

 To add a Replace term:

1	Enter the expression you want to replace in the ‘Replace’ window.

2	Enter the expression you want the replace expression to be replaced with in the ‘With’ window.

3	Click Add.

  Overview


Delete

 To remove a Replace term:

1	On the ‘With’ window, click on the replace expression you want to remove.

2	Click  Delete.

  Overview


Dictionary List

Select the type of dictionary you want HotDog to use.


Document Directory

Whenever you save an HTML file, HotDog will present you with a default directory for storing your files. Using this option you can control which directory will be used to store your documents.

  Overview


Template Directory

Whenever you save a template file, HotDog will present you with a default directory for storing it. Using this option you can control which directory will be used to store your templates.

  Overview


Graphica Directory
Graphics Directory

Whenever you save an image file, HotDog will present you with a default directory for storing it. Using this option, you can control which directory will be used to store your graphics.

  Overview


Published Files Directory

Should you choose to publish your files to a directory, they will be published to the directory specified here.

  Overview


Editor Font

The editing window in HotDog can display all mono-spaced fonts. Inside this limitation you can choose any font you want.

  Overview


Size

To change the size of the text in the editing window of HotDog, use the text size menu.

  Overview


Preview

This window previews the color selections and font size you have chosen.

  Overview


Default Document Extension

Each HTML file you save can have whatever file extension you wish. The most common is .HTML, however some users prefer .HTM

  Overview


Default Backup Extension

You can define the file extension of your automatic backup files.

  Overview


Editable Files

The files shown in the file list are all files that HotDog opens ready for you to edit. You can, if you wish add or remove file extensions to this list using the Add or Remove button.

  Overview


File Dialogs use Current Directory

To move and copy text by dragging the selection with the mouse, select the Drag-And-Drop Text Editing check box.

  Overview


Insert <P> as container

With this option checked, when you insert a <P> tag, HotDog will automatically insert a </P> for you. (The </P> tag ending is optional in HTML).

  Overview


Insert text as preformatted <PRE>
Insert text as pre-formatted <PRE>

Selecting this option ensures that all plain text inserted into HotDog is correctly formatted. When a text document is opened inside HotDog the <PRE> can be used to maintain formatting. Browsers displaying HTML do not display tabs or multiple spaces. The <PRE> displays the text ‘as is’ that is, all tabs are displayed correctly etc.

  Overview


Autosave every xx minutes

In case your computer crashes, HotDog can automatically save your work at a specified interval. Use this option to tell HotDog how often to save your documents. About 5 minutes is a good number. Remember to set an Auto-Save directory for your files to be saved to.

  Overview


Undo/Redo Level

HotDog supports almost unlimited Undo/Redo level. However, to save on memory you can force HotDog to remember only a few levels of undo.

  Overview


Create Backup Files

HotDog can automatically create backup files for you. These files have a ‘bak’ extension. Each time you save a file, your penultimate save is saved as the backup. This is useful for those rare occasions when you accidentally save over a file you wanted to keep.

  Overview


Refresh External Browser Preview on Save

When you save your document, your external browser can be automatically refreshed. This option is useful when you are working a large file with many saves.

  Overview


Open New Document on Start Up

Each time you start HotDog, a new document ready for editing can be automatically created.

  Overview


Use File Dialogs with Preview Function

If you want a quick preview of your files when opening documents check this option.

  Overview


Restore Last Session on Start Up

Any documents you had open last time you closed HotDog can be automatically re-opened when you start HotDog.

  Overview


Skip Animation while loading

When HotDog starts the cool dog animation is displayed. You can skip this animation, and HotDog will load slightly faster.

  Overview


Sound FX

Check this option to edit and change HotDog’s sound effects.

  Overview


Element Type

The element type list box displays all the different colors of the different types of text HotDog uses. For example, the Error Element has a Text color of white and a background color of red. You can change these colors by clicking on the color box.

The sample document window below reflects all your changes.


Text Color

Click on a Text Color box to change the color of the selected Text Element in the Element List box.


Background Color

Click on a Text Color box to change the color of the selected Text Element in the Element List box.


Preview

The sample document window displays all the currently selected reflects all your changes.


Show Tooltips

Uncheck this box to disable HotDog’s automatic tooltips.

  Overview


Show Shortcut Keys

This dialog lists all the shortcut keys that HotDog uses.

  Overview


Syntax Highlighting

Change all documents to Syntax Highlighting mode rather than Tag Highlighting mode. Syntax Highlighted changes the color of all the attributes within each tag but all he tags remain the same color, while Tag Highlighting changes the colors of all the tags but the attributes remain the same color.

  Overview


Tag Coloring

Change all documents to Tag Highlighting mode rather than Syntax Highlighting mode. Syntax Highlighted changes the color of all the attributes within each tag but all he tags remain the same color, while Tag Highlighting changes the colors of all the tags but the attributes remain the same color.

  Overview


Error Tooltips

Uncheck this box to disable HotDog’s automatic error tooltips.

  Overview


HTML Tooltips

Uncheck this box to disable HotDog’s automatic HTML tooltips.

  Overview


Auto Close Tags

Uncheck this box to disable HotDog’s autoclose tags feature.

  Overview


Preferences View

aaaa


Embed Item

The Embed Item dialog is used to provide links to non-standard files. For example, some browsers can display word files. The embed tag could them be used to provide a link to a word file, the size parameters would be used to define the size of the window in the browser that displays the word document. In particular Netscape makes use of the embed tag to embed audio and video controls within a web page.

 To insert an Embedded Item:

1	On the Insert Menu,

2	Click on Embedded Item.

3	Use the folder button to select the file you want to embed.

4	Click OK.


frmEmbed context help


Embedded Item

This box contains the location of the file to be embedded into a document. For example, sample programs or sounds are often embedded into a document. Click the [image] button to find and enter the file you want to embed.

  Overview


Width

Some embedded objects have an intrinsic width. Enter the width here.

  Overview


Height

Some embedded objects have an intrinsic height. Enter the height here.

  Overview


frmFindBrowser (context only)


Description

HotDog will find any installed browsers on your system. However, the name it gives a browser can be cryptic, such as “Netscape ()”. This box lets you change the name of the browser to something more meaningful, such as Netscape, version 3.02.


aaaa

  Related Topics


Location

The Location of a browser gives the position of the executable file that starts the browser. If for some reason HotDog does not find the correct location of your browser, use the [image] button to select the correct file.


aaaa

  Related Topics


Font
Font Dialog

The Font Dialog is used to change the color, size and style of the fonts you use in your documents. If you want to change only a portion of the text in your document, highlight the text before opening the Font Dialog.

Remember - if you select an unusual font type for your web page and the visitor viewing your web page does not have that font installed on their computer, then that font will not be displayed when they view your web page. Instead a default font will be displayed. To give you greater control over the font type used in your web pages, degradable fonts have been introduced. See below for more details.

What do you want to do?

 Open the Font Dialog.

 Change the color of some selected text.

 Change the style of some selected text (Bold, Italic etc).

 View a list of shortcut keys.

 Learn more about Degradable Font Lists.

 Apply a Degradable Font List to text in a web page.


Open the Font Dialog.

  On the Format menu, click on “Font”.


Change the color of some selected text.

1	Using the mouse select the text you want to change.

2	On the Format menu, click on “Font”.

3	In the Font Dialog click the Color Picker

4	Select the color you want to color the text.

5	Click “OK” to insert the colored text into your document.


Change the style of some seleted text (Bold, Italic etc).
Change the style of some selected text (Bold, Italic etc).

1	Using the mouse select the text you want to change.

2	On the Format menu, click on “Font”.

3	Click the style you want for your font.

4	Click “OK” to insert the text with the new style into your document.


View a list of shortcut keys.

F2	Opens the Font Dialog.
CTRL + B	Makes selected text Bold.
CTRL + U	Underlines selected Text.
CTRL + I	Formats selected text in Italics


frmFontDlg


Font

To display text in a web document in a different font, select a font from the drop down list box. Remember, if a visitor does not have the font you selected on their system when they view your text the text will appear in a standard window font. Any degradable font types you are created are listed first.

  Overview


Size

The size selected will determine the size of the text rendered by the browser. A selection of “+1” will render the text 1 point higher than the surrounding text.

  Overview


Color

To change the color of the text rendered by a browser click the Color button.

  Overview


Bold
Bold Text

Check to render the selected text in Bold.

  Overview


Superscript

Check to render the selected text in superscript. (x2)

  Overview


Italic

Check to render the selected text in Italics.

  Overview


Subscript

Check to render the selected text in Subscript. (x2)

  Overview


Underline
Underlined Text

Check to underline the selected text. Remember, if you underline text visitors will think it a link and try to click it. It can be very annoying.

  Overview


Blinking
Blinking Text

Check to make the selected text blink. Remember: blinking text really pisses people off so use it sparingly.

  Overview


Creating and Editing Degradable Font Lists

A degradable font is just a list of different font types in which you would like some text to be rendered. When a visitor views your web page, their browser searches through the font list, looking for the first installed font on their computer. Then the text is rendered in this font type.

It is necessary to have a list of fonts, in case the visitor viewing your web page does not have one or more of the fonts you would like rendered installed on their computer.

What do you want to do?

 Open the Edit Degradable Font List dialog.

 Create a new a Font List.

 Apply a Degradable Font List to text in a web page.


Open the Edit Degradble Font List dialog
Open the Edit Degradable Font List dialog

 To open the Degradable Font List dialog:

1	In the Format menu, select “Font”.

2	In the Font dialog, click


Create a new a Font List

 First open the Degradable Font List dialog:

1	In the Format menu, select “Font”.

2	In the Font dialog, click

3	Click the [image] button to create a new Font List.

4	Select the fonts you want to add to the Font Group from the “Available Fonts” box.

5	Click OK to save your new font group.


Apply a Degradable Font List you have created for use in a web page
Apply a Degradable Font List to text in a web page

 To open the Degradable Font to some text:

1	In the Format menu, select “Font”.

2	In the Font Dialog, click on the “Font” list box.

3	Select the Degradable Font you want to use. All degradable fonts are listed first.

If you have not defined any degradable fonts, then none will appear on the font list. See “Creating and Editing Degradable Font Lists” for more details.


Context help for frmFontDegrade


Font Group

The “Font Group” list box lists all the degradable fonts you have so far created. To add or remove fonts to a font group, select the font group from this list and use the font control boxes below to change the fonts in the “Fonts in selected Group” box. Click the [image] buttons to add or delete a Font Group.

  Overview


Fonts in Selected Group

All the fonts in this list box are part of the Font Group that is selected in the Font Group list box above. When it comes to rendering your text, browsers will attempt to use the fonts in the list top down, i.e. browser will try to render the text in the font listed at the top of the font box. If that font can not be found then the browser will attempt to render the text using the second highest font in the list - and so on until it locates a font installed on the visitor’s computer.

  Overview


Available Fonts

This box contains a list of all the fonts installed on your system.

  Overview


Preview of selected Font Group

This window displays all the different fonts you have selected.

  Overview


Importing Text Files

There are two ways of inserting text into documents. Text can be inserted as is or converted to HTML.

For example, say you are inserting the following text into a document:

“That is not dead which can eternal lie,

And with strange aeons, even death may die.”

-H.P. Lovecraft.”

If this text was inserted with no changes, it would appear as above in your web page with <PRE> tags wrapped around it. However, you would be unable to change the font because the browsers treat all text inside <PRE> tags as plain text.

If you converted the above text to HTML, it would be inserted as:

"That is not dead which can eternal lie, <BR>

And with strange aeons, even death may die."<BR>

<P>

-H.P. Lovecraft."<BR>

Now that the text is HTML, you can edit the text as you see fit.

What do you want to do?

 Import a Text File.

 Insert text “as is” i.e. with no changes.

 Convert text to HTML.


Import a Text File.

 On the File menu click on “Import Text Document”

1	Use the File Picker to find the file you want to import.

2	Click Open.


Insert text "as is" i.e. with no changes.

 First open the “Import Text File” dialog:

1	On the File menu click on “Import Text Document”

2	Use the File Picker to find the file you want to import.

3	Click Open.

4	Choose where you want to insert the text:

•	Into a New Document.

•	Into the current Document.

5	Select “Insert with <PRE> tags”.

6	Click “Convert”.


Convert text to HTML.

 First open the “Import Text File” dialog:

1	On the File menu click on “Import Text Document”

2	Use the File Picker to find the file you want to import.

3	Click “Open”.

4	Choose where you want to insert the text:

•	Into a New Document.

•	Into the current Document.

5	Select “Convert to HTML”.

6	Choose which conversion option you want (Usually both).

7	Click “Convert”.


frmImportText


Insert with <PRE> tags

Selecting this option ensures that all plain text inserted into HotDog is correctly formatted. Browsers displaying plain text do not display tabs or multiple spaces. The <PRE> displays the text ‘as is’ that is, all tabs are displayed correctly etc.

  Overview


Convert to HTML

Browsers displaying plain text do not display tabs or multiple spaces. If you select this option HotDog will try to convert your plain text document to HTML. That is, <P> tags will be inserted for blank lines and non-breaking spaces will be inserted for blank spaces.

  Overview


End each line with <BR>

Each carriage return in a plain text file can be replaced with a <BR> tag - thus trying to ensure that your plain text retains its formatting when converted to HTML.

  Overview


Convert blank lines to <P>

Each blank line in a plain text file can be replaced with a <P> tag - thus trying to ensure that your plain text retains its formatting when converted to HTML.

  Overview


Horizontal Rule

Use this dialog to insert a horizontal line (or rule) into your web page.

Tip

The width of a line can be defined in two ways, as a percentage of screen width, or absolutely in pixels. The difference lies in how the line is displayed when a visitor resizes their browser. If you define a lines width as a percentage of the  screen width (100%) say, then no matter how a visitor resizes their browser, the line will always fit exactly across their screen. If a line’s width is defined in pixels, then the line will always appear the same width, no matter how a visitor resizes their browser. If the browser window is smaller than the line, then scrollbars appear in the window.

What do you want to do?

 Open the Insert Horizontal Rule Dialog.

 Insert a line into your document.


Open the Insert Horizontal Rule Dialog

  On the ‘Format’ menu click “Line”.


Insert a line into your document

  First open the Insert Horizontal Rule Dialog:

•	On the ‘Format’ menu click “Line”.

1	In the Thickness box, choose the thickness of the line.

2	Using the Alignment menu, choose the alignment of the line on your web page.

3	The Width box can be used to set how wide the line is.

TIP

•	The width of a line can be defined in two ways, as a percentage of screen width, or absolutely in pixels. The difference lies in how the line is displayed when a visitor resizes their browser. If you define a lines width as a percentage of the  screen width (100%) say, then no matter how a visitor resizes their browser, the line will always fit exactly across their screen. If a line’s width is defined in pixels, then the line will always appear the same width, no matter how a visitor resizes their browser. If the browser window is smaller than the line, then scrollbars appear in the window.


frmInsRule context help


Rule Thickness

In the Thickness box, choose the thickness of the line. Typical values are 2-4 pixels.

  Overview


Width

The width of a line can be defined in two ways, as a percentage of screen width, or absolutely in pixels. The difference lies in how the line is displayed when a visitor resizes their browser. If you define a lines width as a percentage of the  screen width (100%) say, then no matter how a visitor resizes their browser, the line will always fit exactly across their screen. If a line’s width is defined in pixels, then the line will always appear the same width, no matter how a visitor resizes their browser. If the browser window is smaller than the line, then scrollbars appear in the window.

  Overview


Width Units

Defines the units used for the width box.

  Overview


Include Line Shading

Line shading makes the line look a little more interesting. However, don’t make the line distracting to visitors reading your web page.

  Overview


Alignment

Using the Alignment menu, choose the alignment of the line on your web page. The typical value for alignment is ‘Center’.

  Overview


frmListShortcuts context only


Fixed Shortcuts

This window displays a list of all the fixed shortcuts HotDog uses. A fixed shortcut is one that can not be changed.


xxxx need main form xxxx

  Related Topics


User Defined Shortcuts

This window displays a list of all the user defined shortcuts. A user defined shortcut is a keyboard combination that you have defined to perform a task (such as insert a tag).


Xxxx need main form xxxx

  Related Topics


Document Information (Meta Tags)

Meta Tags contain additional information about your web page. This information is not displayed to visitors, but is indexed in different ways by search engines. For example, the keywords meta tag can contain subject keywords related to your web page. These keywords are used by some search engines as a way of cataloguing your web page - so if you want to be found on the Internet, be sure to include comprehensive keywords and document information.

What do you want help on?

 Opening the Document Information dialog.

 Document Title and Base URL.

 Document Author and Description.

 Document Keywords.

 Document Distribution.

 Document Redirection.


Opening the Document Information dialog.

  On the Format menu click on “Document Information”.


Document Title
Document Title and Base URL

The Document Title of your web page is used by many search engines as a way of indexing your web page. The document title also appears at the top of a visitors browser when they visit your web page. A trick to make the most out of the document title is to make it long. For example:

“Peter’s Bookshop - sellers of old, rare, antique books. Based in Melbourne Australia.”

All the crucial information about the web page is located near the start of the title, the remaining information just contains additional keywords.

Base URL

If you are using long relative links, the Base URL can be useful. For example, say you have a simple document that only links to 20 or so images. All the images are located in the same directory, eg:

<IMG SRC=”media/images/pic1.jpg”>

Rather than typing “media/images/” in front of every image, you could change the Base URL to “media/images/”. Then all your image references become:

<IMG SRC=”pic1.jpg”>

However, if you did change the BASE URL as above, then to link your web page to another document in the same directory would require a relative link jumping up two directories:

<A HREF=”../../doc2.html”>

See Absolute and Relative References for more information.

  To edit your documents title:

1	On the Format menu click on “Document Information”.

2	Click the “Title” tab.

3	Enter the Document Title and/or Base URL into the boxes provided.


Document Author and Description

The Author and description of your web page are used by some search engines to catalog it. It is worth your time to give a meaningful description for these fields.

  To edit your documents Author and Description fields:

1	On the Format menu click on “Document Information”.

2	Click the “Author & Description” tab.

3	Enter the Author and Description of your web page into the boxes provided.


Document Keywords

Most search engines use the keyword list to index your web page. Frequently many of the web pages you create will have the same keyword list, so HotDog lets you save keyword lists as a keyword file.

  To add keywords to a web page:

1	On the Format menu click on “Document Information”.

2	Click the “Keywords” tab.

3	Enter the Keyword for your web page into the box provided.

  To save your keywords to a keyword file:

1	Enter your keywords into the Keywords box.

2	Click “Save Keywords File”.

3	Enter a name for your keyword file in the “Save As” dialog.

4	Click “Save”.

  To load a keywords file:

1	Click “Load Keywords File”.

2	Use the File Picker to select the keywords file you want to load.

3	Click “Open”.


Document Distribution

The Distribution method you choose effects the way some search engines index your web page. For example, there are some web pages you may not want indexed by search engines - such as those which are inside frames. Setting the distribution method in these pages to “Local” will stop them from being indexed by search engines.

  To add keywords to a web page:

1	On the Format menu click on “Document Distribution”.

2	Click the “Distribution” tab.

3	Choose the Distribution method you want to use.

HTTP-EQUIV

Meta-information can be used to pass extra information to browsers. For example:

<META http-equiv="Version_Number" CONTENT="2.02">

<META http-equiv="Style" CONTENT="Modern">

<META name="Completed" CONTENT="Yes">

If a browser requests the Header information of this document, all the http-equiv results are returned while the name values are not. For example, a HTTP response to a GET or HEAD request for the document above would be:

Version_Number:2.02

Style:Modern

Along with all the other information in the header such as date and time.

Names such as Date, Server and Last-modified are names that should not be used as they are typically generated by the server independently.


Document Redirection

You can automatically redirect visitors to a web page to a another web page with this option. For example, if you have recently changed a HTML filename that might be linked to from a search engine you might make the old file a simple redirection page, that after a few seconds automatically takes the visitor to the new page.

  To add keywords to a web page:

1	On the Format menu click on “Document Redirection”.

2	Click the “Redirection” tab.

3	Enter the redirection URL and the time to wait before redirecting.


frmMeta Context Help


Document Title

This title appears at the top of the visitor’s browser.

  Overview


Base URL

If you are using long relative links, the Base URL can be useful. For example, say you have a simple document that only links to 20 or so images. All the images are located in the same directory, eg:

<IMG SRC=”media/images/pic1.jpg”>

Rather than typing “media/images/” in front of every image tag, you could change the Base URL to “media/images/”. Then all your image references become:

<IMG SRC=”pic1.jpg”>

  Overview


Authors Name

Used to by some search engines to index your web page.

  Overview


Document Description

Used to by some search engines to index your web page.

  Overview


Document Keywords

Used to by most search engines to index your web page.

  Overview


Insert as Typed

Does not change the of the keywords you type.

  Overview


Insert all as Uppercase

Converts all keywords you type to uppercase.

  Overview


Insert all as Lowercase

Converts all keywords you type to lowercase.

  Overview


Load Keywords

If you have previously saved a keyword file, you can reload it by pressing this button and using the “File Picker” to select the keyword file.

  Overview


Save Keywords

To save a keyword file for use by other documents, click the Save button and choose a name for your keyword file.

  Overview


Distribution Type

The Distribution method you choose effects the way some search engines index your web page. For example, there are some web pages you may not want indexed by search engines - such as those which are inside frames. Setting the distribution method in these pages to “Local” will stop them from being indexed by search engines.

  Overview


Use Name instead of HTTP-EQUIV

Meta-information can be used to pass extra information to browsers. For example:

<META http-equiv="Version_Number" CONTENT="2.02">

<META http-equiv="Style" CONTENT="Modern">

<META name="Completed" CONTENT="Yes">

If a browser requests the Header information of this document, all the http-equiv results are returned while the name values are not. For example, a HTTP response to a GET or HEAD request for the document above would be:

Version_Number:2.02

Style:Modern

Along with all the other information in the header such as date and time.

Names such as Date, Server and Last-modified are names that should not be used as they are typically generated by the server independently.

  Overview


Enable Redirection

Check this box if you want to be able to redirect your document.

  Overview


Time Before Redirection

This is the time your web page is displayed before redirection.

  Overview


New URL

The URL your document is redirected to after the time defined by the “Time Before Redirection” box has elapsed.

  Overview


Open a New Document
Create a New Document

Each document you open in HotDog is opened and edited using the HotDog editor.

What do you want to do?

 Create a New Document.

 Preview a Template.

 Open a Template.

 Change the Default Template Directory.

 Change the Default Template.


Change the Default Template
Change the Default Template.

1	On the File Menu click on “New”.

2	Click the “Current Normal Template” [image] button.

3	Use the “file picker” to select the new default template.


Create a New Document.

1	On the File Menu click on “New”.

2	Click “OK”.


Preview a Template.

1	On the File Menu click on “New”.

2	Click on the template you want to preview.

The preview of your document appears in the “Preview Window” to the left of the template icons.


Open a Template.
Edit a Template.

  To open a Template for editing:

1	On the File Menu click on “New”.

2	Click on the template icon you want to edit.

3	Select “Open as Template”.

4	Click “OK”.


Xxxx not fully done


Change the Default Template Directory.

  To change the default template directory:

1	On the File Menu click on “New”.

2	Click Template Directory [image] button.

3	Using the “Directory Picker” navigate to the directory you want to be the Template Directory

4	Click OK.


frmNew Context Help


Normal Template

The Normal Template is the standard document HotDog opens. You can edit this document if you wish.

  Overview


Edit Normal Template

Click the button to open a template for editing.

  Overview


Template List

This list displays all the different templates you have created. To use a template from the template list, simply double click on the template to open a document based on the template.

  Overview


Template Directory

This directory stores all the templates HotDog uses.

  Overview


Template Preview

By clicking on each of the templates in the Template List, you can gain a quick preview of what they look like from the “Template Preview” window. Remember, the most basic templates will appear blank.

  Overview


Add Publish Field
Add Publishing Field

Publishing Fields are used to automatically insert data into an HTML document. This data can be inserted automatically (such as the current time), by the user of the document (such as the users name) or from a file, (such as a price).

Commonly, Publishing Fields are used in two ways:

•	Inserting current information into a document on upload, such as the date and time.

•	As part of a template, where on opening a document, a user is prompted to enter information.

What do you want help on?

  Inserting Publishing Fields into your document.

  Creating a template containing Publishing Fields.


Inserting Publishing Fields into your document

  Start the Publishing Fields Wizard:

•	On the Insert Menu, click on “Publish Field”.

Select when you want the data to be inserted into your document. “When the document is created” is usually used for templates. This would mean that each time you open a template with a publishing field in it - HotDog prompts the user to enter some details. The “When the document is published” option is generally used when you go to upload your document. That is, when you upload your document you will be prompted to enter some information, such as the date.

•	Click Next.
Select the data type you want enter, automatic, by user or from file.

Automatic

HotDog can insert automatically insert data such as date and time.

User Entered

This field type prompts a user to enter some data.

From File

This field reads information from a file and puts in into your document.

Click Finish to insert the publishing field into your document.


Creating a template containing Publishing Fields

In this example you are going to create a simple template that inserts a users name into the document.

Start the Publishing Fields Wizard:

  On the Insert Menu, click on Publishing Field.

1	Select ‘When Document is created’.

2	Click Next.

3	The field is to be filled in by the user, so select ‘By the User’.

4	Click Next.

5	Enter ‘Please enter your Name’ for the Message Text.

6	Enter ‘Peter’ for the Default Value.

7	Click Finish to insert the field into your document.

To save the document as a template,

1	On the File menu, select Save As.

2	Under ‘Save as Type’ select ‘HotDog Template (*.tpl)’.

3	Under ‘Save In’ select the HotDog Templates directory.

4	Under ‘File name’ enter ‘demo’.

To use your new template,

1	On the File menu, click New.

2	Select the template ‘demo’.

3	Click OK.

Note: You may have to refresh your document to view the changes.


frmPublishField context help


When to apply Template
When to Apply a Template

 Choose either:

•	When the Document is Created.

•	When the Document is Published.

For example, if you create a publishing field that asks the user for their name and date, this question can be asked when the document is first created or when the document is first uploaded.

  Overview


File Name

Enter the name of the file that you want HotDog to read the publishing details from.

  Overview


Field

If you have many different publishing fields inside a document or template, you might to name each publishing field a different name for your convenience.

  Overview


File Contents

You can enter the contents of the here and then click “Finish” to save and insert the File publishing field.

  Overview


How to fill in the field

 Choose from:

•	By the User.

This means that the user will be prompted to supply any information.

•	Automatically by HotDog.

HotDog can supply some details, such as the time and date.

•	Read from a File.

All the details are read from a file.

  Overview


Document Properties

The Document Properties dialog controls the appearance of your document. You can change the colors of the text and links, add a background color and image. Using the Document Properties dialog you can also see how large your document is (including images) and how long it would take to download under different modem speeds.

What do you want to do?

 Open the Document Properties Dialog.

 Change the Color of a Document.

 Add a Background Graphic to a Document.

 Viewing the Document Size.

 Save/Load a Color Scheme.


Change the Color of a Document

  First open the Document Properties dialog:

1	On the Format menu click “Document Properties”.

2	In the Document Properties dialog click a Color Picker [image] to select a color.

3	As you change the color of the different link types and text, your changes will be previewed in the preview window of the Document Properties dialog.

Description of the Link Types.

 Background Color

The background color of your document. If you are using background graphics, make sure to pick a background color as well because it can take a while for the graphic to load.

 Document Text

Unless you specify otherwise with the <FONT> tag, the text of the document will be displayed in this color.

 Standard Link

An unclicked link will be displayed this color.

 Active Link

A link that is being clicked will be displayed this color.

 Visited Link

A link that has been visited will be displayed this color.


Open the Document Properties Dialog

  On the Format menu click “Document Properties”.


Add a Background Graphic to a Document

  First open the Document Properties dialog:

1	On the Format menu click “Document Properties”.

2	In the Background Properties Box click the [image] button.

3	Using the  “File Picker” choose a file to be used as your background image.

4	Click OK.


Viewing the Document Size

  First open the Document Properties dialog:

1	On the Format menu click “Document Properties”.

2	In the Document Properties dialog click the “Document Size” tab.

3	By selecting different Visitor Connection Speeds you can get an estimate of how long your web page will take to download (i.e. loaded into the visitors browser).


Save/Load a Color Scheme

  First open the Document Properties dialog:

•	On the Format menu click “Document Properties”.

Saving Schemes

1	After selecting different Text/Link colors and background graphics, click the “Save As” button.

2	Enter a name for the scheme.

3	Click “OK”.

Loading Schemes

 Click on the Schemes drop down list box and select the scheme you want applied to your document.


frmDocProperties context help


Text Preview

This window displays the background image and various text colors you have chosen for your current document.

  Overview


Background Image

This image appears as the background to your document. To select an Image, click the [image] button and use the “file picker” to select a picture.

  Overview


Background Color

This is the color that forms the background of your document. Even if you are using a background image, you should still choose an appropriate background color for your document because this color loads before your background.

  Overview


Document Text Color

This is the basic color that all of the text in document will be displayed in if left unchanged.

  Overview


Active Link Text Color

As a visitor clicks on a link, it changes color to indicate it is being selected. This color is known as the Active Color.

  Overview


Standard Link Text Color

A link, before it has been clicked, is displayed underlined in the Standard Link Color.

  Overview


Visited Link Text Color

A link, after it has been clicked, is displayed underlined in the Visited Link Color.

  Overview


Scheme Name

You can save your background graphic and different text colors as a Color Scheme for later use. These saved schemes are listed in the Scheme List box. To apply one of these schemes to your document, just select the scheme from the Scheme List box.

  Overview


Save As

You can save your background graphic and different text colors as a Color Scheme for later use. To save your scheme, click “Save As” and enter a scheme Name.

  Overview


Remove

To remove a scheme, select it from the Scheme List box, and click “Remove”.

  Overview


Visitor Connection Speed

To give you an indication of how long your document takes to download under different modem speeds, select the speed of the modem (or connection) from the “Visitor Connection Speed” box.

  Overview


Insert a Style Sheet into a document.

1	On the ‘Format’ menu, select ‘Cascading Style Sheets’, ‘Insert Style Sheets’.

2	Under the ‘Available Styles’ select the styles you want to insert into your document.

3	Click the [image] button.

4	Click OK.

Inserting Remote Styles

1	Under the ‘Available Styles’ select the styles you want to insert into your document.

2	Click the [image] button.

3	Click OK.

  Related Topics


Delete a Style Sheet.

1	On the ‘Format’ menu, select ‘Cascading Style Sheets’, ‘Insert Style Sheets’.

2	Click the Insert Style button.

3	Remove the Style(s) no longer want in your document.

  Related Topics


Add a Remote Style Sheet link in your document.

Inserting Remote Styles

1	On the Style Sheets Toolbar click Insert Style Sheets.

2	Under the ‘Available Styles’ select the styles you want to insert into your document.

3	Click the [image] button.

4	Click OK.

Background

As explained previously, the power of style sheets comes from their ability to be all referenced to a single file.

For example, rather than defining the same style sheet code on every web page you create, you can create a single file that contains all the style sheets you use, and just have your web page point to this file to be able to use the styles defined inside of it.

This means if you change a style sheets properties within the external file, the look of every web page that uses that style will be effected.

In this example you will create a web page that uses an external link to a style sheet. Note however, you can link to other external style sheet files on the web, you don’t necessarily have to create your own!

Open a new document, and save it straight away.

Click the [image] button on the style sheets toolbar, or on the ‘Format’ menu, select ‘Cascading Style Sheets’, ‘Insert Style Sheets’

To create an external style sheet file, click the [image] button.

From the list of available files in the in the Insert Style window, select ‘Tutorial Example’.

Click

Click OK.

You will be prompted to enter a filename and directory for the style sheet file. Save the Style Sheet file in the same directory as your document and enter ‘Style1’ for the name.

Click OK.

The style is now inserted as a link into your document:

<LINK REL=STYLESHEET HREF="Style1" TYPE="text/css">

Notice how the link to the style sheet file is relative.

To actually use the style in HotDog, you will have to enter the HTML syntax manually. This is because HotDog does not necessarily know the names of the style in the style files. For example, under HREF you could have entered the URL to a style sheet somewhere else on the web.

Remember- the syntax to use the Style Sheet you created was:

<DIV CLASS=”HEADING”> your text here </DIV>

Have a look at your document under Internet Explorer. You should see your big red bold text.

Try it under Netscape, does it work?

Style Sheets are not fully implemented yet by Netscape and MS Internet Explorer, so they may of limited use to you. However Browsers fully implementing Style Sheets should be coming soon.

Optimizing Style Sheets

Like most of HTML, you can optimize style sheets to work better on browsers that don’t use styles.

For example, rather than creating your own class ‘Heading’, you could modify the <H1> tag instead. By browsers that can support style sheets, the <H1> tag would now display your 14 point text, bold and red. However, browsers that can’t display style sheets would still display your text as an <H1> heading. A brief example follows:

<STYLE TYPE="text/css">

<!-- /* Style Sheet definitions need to be commented to hide them from incompatible Browsers.*/

/*hotdog style name="demo2"*/

H1 {

font-size: "14pt";

color: "#FF0000";

text-align: "Left";

white-space: "[none]";

font-weight: "bold";

background: #FFFFFF;

";

}

/* End Style Sheet commenting. */  -->

</STYLE>

<H1> Red and bold text here if browser is capable of displaying style sheets, otherwise this text appears as a normal heading. </H1>

  Related Topics


Modifying a style sheet you have already created.
Modifying a Style Sheet you have already created

1	On the Style Sheets Toolbar, select ‘Edit Styles Sheets’ or on the Format Menu, select ‘Cascading Style Sheets’, ‘Edit Style Sheets’.

2	Click on the style you want to modify.

3	Click ‘Edit’.

  Related Topics


Creating a Style Sheet in HotDog

1	On the Format Menu, select ‘Cascading Style Sheets’, ‘Edit Style Sheets’.

2	In the Edit Styles window that appears, click ‘New’.

All the attributes that can be changed are listed in the tree view window. To display the attributes, click on 'Text' and/or 'Container'. Use the arrow keys to see all the properties.

3  Give your style sheet a name.

4  Begin to edit attributes.

  Related Topics


Styles Context Help


Name

The filename which you use to refer to the style sheet. Usually this name is the same as the tag name.

  Overview


Class Name

If you are defining your Style Sheet as a new tag (eg: <MYTAG>) then enter the Tag Name (Class Name) here.

Tip

If you have trouble getting your browser to recognize style sheets, try first modifying a standard HTML tag, such as <H3>.

  Overview


Tag

This is the tag you will be using to set your style. For example, if you choose 'H3’ then the to use your style in a document, type:

<H3> This is a new style </H3>

Tip

Modifying HTML tags is a useful trick, because if a browser doesn’t understand style sheets, then it reads the modified tag in its modified form. For example, if you modified the <H3> tag to display red underlined text, but if the browser a visitor is using doesn’t support style sheets then the standard H3 heading is displayed.

  Overview


Style Sheet Properties List

This list displays all the properties that you can change when creating a style sheet.

  Overview


Font

The font family refers to the font that the style sheet will use. Because you specify specific fonts, there is always the risk that the visitor to your web page will not have it on their system. In this case a default font is used.

  Overview


Font Units

This list displays all the different font units you can use. The unit usually used is ‘pt’.

  Overview


Size

The Font Size property is used to specify the size of the font the style sheet will use.

  Overview


Size Units

This list displays all the different font units you can use. The unit usually used is ‘pt’.

  Overview


Line Height

This defines the distant between each line of text (i.e., distance between the baselines) If you choose a font of 12pt, and a line height of 6pt, then your text will over lap. This can be useful for creating cool text effects.

  Overview


Line Height Units

This list displays all the different line height units you can use. The unit usually used is ‘pt’ and usually the line height units would the same as the font size units.

  Overview


Text Indent

Defines how far the text is indented from the from the margin the text block is aligned to.

  Overview


Text Indent Units

Units used to describe how far the text is indented.

  Overview


Applies To

The font effect you are creating can apply to the first letter, line or whole of the text. Select “None” to make the style sheet apply to the entire text block.

  Overview


Align

Select the alignment of the of the block of text:

Left	Aligns to text block to the left margin.
Right	Aligns to text block to the right margin.
Center	Aligns to text block to the center of the left and right margins
Justified	Makes each line of text fit exactly into the text boundaries.
  Overview


Case

Sets the Case style of your Style Sheet.

None	The case of the text remains unchanged.
Capitalize	All text is capitalized.
Uppercase	All text is converted to uppercase.
Lowercase	All text is converted to lowercase.
  Overview


Whitespace

Whitespaces are the spaces in your document (created by hitting the spacebar) This attribute determines how the style sheet treats the whitespaces.

•	Normal - Multiple whitespaces are collapsed into one space.

•	Pre - Multiple whitespaces are left alone

•	NoWrap - Text does not wrap without a <BR> tag

  Overview


Color

The Font Color property is used to specify the color the font appears in.

  Overview


Letter Spacing

For extra distance between letters. use letter spacing. A value of 0 prevents justification. Negative values are allowed.

  Overview


Letter Spacing Units

Units used to describe the spacing of the letters.

  Overview


Word Spacing

Similar to letter spacing, word spacing defines the amount of space between words.

  Overview


Word Spacing Units

Units used to describe the spacing of the words.

  Overview


List Style

The list style determines what sort of pointer will be used to mark the points.

The options are:

• No Bullets • Disc • Circle • Square	• Decimal • Lower Roman • Lower Alpha • Upper Alpha
This is used if you don't specify an image to display, or if automatic image loading is turned off.

  Overview


List URL

This is the URL of the image that will be used as the list pointer.

  Overview


List Position

The list position controls how the text will be drawn around the list point.

There are two options, Inside, Outside. Both are displayed below

Outside:

•	 List Element

Second line of list element

Inside:

•	 List Element

Second line of list element

  Overview


Side Flow

The side flow attribute allows text to be wrapped around any (not just tables and images) object. For example, when you align a table left, if there is room, text will 'flow' down the right side of the table. Now you can do the same with any object (like form elements etc.)

  Overview


Clear

The clear attribute defines how an object reacts to other objects (such as text etc.) trying to flow around its sides.

•	None - Floated object retains standard properties with regard to floating

•	Left - Objects can't flow down left side of floated object

•	Right - Objects can't flow down right side of floated object

•	Both - No objects can flow around the floated object

  Overview


Container Width

Defines the width of the container.

  Overview


Container Width Units

Units used to describe the containers width.

  Overview


Container Height

Defines the height of the container.

  Overview


Container Height Units

Units used to describe the containers height.

  Overview


Container Alignment

Any text or objects inside the style sheet tags, will be aligned depending on the alignment you choose.

  Overview


Padding

Defines how far objects sit from the container border.

  Overview


Padding Units

Sets the units used to define how far objects sit from the container border.

  Overview


Border Size

Defines the size of the border for the container.

  Overview


Border Style

Sets the style of the border - dotted, solid line etc.

  Overview


Margin

Defines the distance the text or objects are moved in from the left, right, top and bottom margins.

  Overview


Margin Units

Defines the units for the margin distances. These distances are the distance that text or objects are moved in from the left, right, top and bottom margins.

  Overview


Background Color

The background color of the container. The background color can also be used to give text a background color.

  Overview


Image Filename

A URL pointing to the image to be used as a background image.

  Overview


Repeat Instructions

Defines how the background image is to be tiled. The possible values are:

•	Repeat : Tile normally

•	Repeat - X : Tile across the top of the page

•	Repeat - Y : Tile up and down the right margin of the page

•	No Repeat: Show image at the top left of the screen

Fixed (x,y): Specify the position of the background image exactly.

  Overview


Fixed Position

The background image appears at a fixed position on your web page.

  Overview


Anchor

Defines the different colors for the different states of the anchor tag.

  Overview


Font Effects

Check the various boxes to set different font effects.

  Overview


Frames Editor
Frames Manager

The Frames Tool in HotDog allows you to divide a browser window into multiple, independently scrollable frames of arbitrary layout, each of which can display separate HTML documents. That way, hyperlinks in one frame can be used to update the contents of other frames, making it possible for Web programmers to build visually pleasing, sophisticated WWW pages with easy-to-navigate user interfaces built in. Netscape's frame extensions also make it possible to launch multiple browser windows and to control the contents of each window through hyperlinks in other windows.

What do you want help on?

 Starting the Frame Wizard.

 How to Create a WebSite using Frames.

 An example of a WebSite made with Frames.

 How to open URL’s in different Frame windows.

  Related Topics


Starting the Frame Wizard

  On the Insert Menu, click on ‘Frames’.


How to create a WebSite using frames

(by Jarrod Durnan)

The HotDog Frames Supertool allows you to easily create a frames-based Web page on which several HTML documents can be displayed simultaneously in their own independently scrollable and resizable windows.

Hypertext links which appear on a page in one of these frames can then be modified with the "target" parameter so that the pages they link to appear in other frames, or take up the entire Web browser screen, or even appear in a new Web browser screen. This capability allows the user to create Web sites which are easy to navigate and maintain, whilst also being aesthetically pleasing.

Where is the Frames Supertool

Click on the ‘Insert Frames’ button on the ‘Insert’ toolbar. (You can display this toolbar by selecting ‘Toolbars’ from the ‘View’ menu in HotDog 4, checking the ‘Insert’ check-box and clicking on the ‘OK’ button.)

How To Create A Web Site Using Frames

The following tutorial describes the steps taken to produce an example HTML document, "FrameIndex.html", using the HotDog Frames Supertool. This example document uses two frames to aid site navigation. The frame on the left-hand side of the browser window contains a number of buttons which act as hypertext links to various pages which, through the use of the "target" parameter, appear in the frame on the right-hand side of the browser window. The steps below can be used as a general guide for creating any site which uses frames.

1) Before making a frames Web page, the HTML documents which will appear in each of the frames on the page must be created. Pre-made pages for the example frames document we will create are listed and described below:

These documents are stored in the Help/Tutorials directory off the man HotDog directory. You can also access them with the WebSite Manager.

frametoolbar.html	The page displaying the toolbar with links to all the other web pages.
framewelcome1.html	The introductory page
frameart1.html	Deals with Bosch's Art
framehistory1.html	Deals with a history of Bosch's life
framecontactme.html	A feedback page

2) Now start a new Web page in HotDog to insert the frames code into. To start a new page either select ‘New’ from the ‘File’ menu in HotDog 4 and then click on ‘Default HotDog 4 Template’ in the screen that appears, or just click on the ‘New Document’ button in the HotDog 4 toolbar. A new document with beginning and ending standard HTML tags will appear on the screen. Save the document to the same directory as the example Web pages listed in step 2 before adding anything to it by selecting ‘Save’ from the ‘File’ menu - call the new page "FrameIndex.html".

3) Start the Frames Wizard by selecting ‘Frames’ from the ‘Insert’ menu

4) The Frame Wizard will appear. Click on the ‘Next>>’ button to go to the next screen in the Wizard.

5) Select ‘Columns’ from the ‘Arrange Frames by:’ drop down list. The number of frames is (conveniently!) set to "2" by default. Click on the ‘Next>>’ button to accept these settings and continue to the next screen in the Wizard.

6) The Frames Wizard screen now being displayed is where frames are sized and their attributes are set. The frame on the left hand side is highlighted in blue to show that it is the frame whose attributes are currently being displayed. Resize this frame by using the mouse to drag the right hand edge of the frame towards the left hand side of the screen. You will see the width value change as you drag the frame. Drag the frame until the width setting is 16%.

7) In the ‘Frame Name’ text field, type "toolbar".

8) In the Frame URL field either type "frametoolbar.html" or use the ‘Browse’ button next to the text field to locate the html file.

10) If you wanted a border around the page within this frame you would enter a pixel value in the Margin (W) and Margin (H) text fields. For the purposes of this tutorial however we will leave these fields blank.

11) Select ‘No’ from the ‘Scrolling’ drop-down list to suppress the appearance of scroll bars within this frame (selecting ‘Yes’ will make the scroll bars appear regardless of whether they are needed whilst selecting ‘Auto’ will cause scroll bars to appear if the page to be displayed within this frame is larger than the frame).

12) Leave the ‘Resizable’ check box unchecked to stop users from being able to resize the index frame.

13) You have just finished defining the index frame. Now click on the right hand frame to specify it's parameters.

14) With the right hand frame highlighted in blue, enter the following attributes:

•	Frame Name: "mainpage".

•	Frame URL: either enter "FrameWelcome1" or browse to find this file and select it.

•	Margin (H): leave as 0.

•	Margin (W): leave as 0.

•	Scrolling: "Auto".

•	Resizable: leave unchecked.

15) You have now finished specifying the attributes of your frames page. To add the HTML code for these frames to your new page, click on the "Finish" button at the bottom of the Wizard screen.

16) The code for the frames will then be added to your page and will resemble the following:

(code for frames - e.g.)

<frameset cols="16%, 84%">

  <frame  src="frametoolbar.html" name="toolbar" scrolling="no" NORESIZE>

  <frame  src="FrameWelcome1.html" name="mainpage" scrolling="no NORESIZE>

 </frameset>

17) Delete the <BODY> and </BODY> tags from the frames Web page. The <FRAMESET> and </FRAMESET> tags which were added to your page are replacement tags for the <BODY> tags. If the <BODY> tags are not removed then the frames will not display on some browsers. Save your page.

18) You have now created a page called "FrameIndex.html" which contains two frames; one called "toolbar" and one called "mainpage". The first frame, "toolbar", displays a Web page called "frametoolbar.html". The second frame, "mainpage", contains a page called "FrameWelcome1.html".

If you examine the HTML code in the "frametoolbar.html" page you will notice that the links it contains include a TARGET parameter, such as in the following example:

<a href="FrameContactme.html" target="mainpage">

<img src="Graphics/contact_me.gif" border=0>

</a>

This target parameter tells the browser to make the specified link, "FrameContactme.html", appear in the frame called "mainpage".

So the links in the toolbar frame cause pages to appear in the mainpage frame, because each link on the page "frametoolbar.html" which appears in the toolbar frame contains a target parameter specifying "mainpage" as the frame to display the link in.

The steps outlined above can be used as a guide for creating any frames-based page.

  Related Topics


frmFrameWizard context help


Arrange Frames By

  To begin constructing frames do one of the following:

•	Decide how many Columns you want on your web page. (Select “Columns” from the list box and enter the number of columns into the Number box).

•	Decide how many Rows you want on your web page. (Select “Rows” from the list box and enter the number of rows into the Number box).

  Overview


Rows and Columns

This picture displays reflects the initial frame layout you have chosen.

  Overview


Number

Use this  box to set the number of rows or columns in your web page. The next page of the wizard lets you add the number of columns or rows to your current selection.

  Overview


Margin Height

The distance that text is indented from the top and bottom margins of the frame.

  Overview


Margin Width

The distance that text is indented from the left and right margins of the frame.

frmFrameWizard context help

  Overview


Height (%)

This box expresses the height of the highlighted frame as a percentage of the height of the overall web page.

  Overview


Width (%)

This box expresses the width of the highlighted frame as a percentage of the width of the overall web page.

  Overview


Scrolling

There are three different ways you can set the scrollbars around a frame:

Auto	Scrollbars only appear if the content of the frame does not fit into the area defined by the frame boundaries.
Always	Scrollbars are always visible on the frame.
Never	Scrollbars are never visible, even if the content of the frame does not fit into the area defined by the frame boundaries.
  Overview


Resizable

Check this box if you want to let visitors move your frame borders.

  Overview


Frame Name

Each frame must have a name to identify it. Enter the frame name into the “Frame Name” box.

  Overview


Frame URL

Each frame must be linked to a URL. This URL specifies the web page that will be opened inside the frame. Click the [image] button to open the “file picker” and choose the document you want to link to.

  Overview


frmTagProperty context help only


Tag Description

This window clearly defines the different attributes and values that are valid for the tag.


Defined In

This list contains all the different HTML specifications that the tag listed in the Tag Properties window is defined in.


frmThesaurus - context only


Current Word

Displays the word you selected before clicking starting the online Thesaurus, or displays the last word you looked up.

You can also type a word in the Current Word box, and then click the Look Up button.


Look Up

To display a list of synonyms for the word in the Current Word box, click the Look Up button.


Categories

Click the category that best suits the type of synonym you are looking for.


Synonyms

Displays all synonyms and related words for the word you looked up.


Replace

To replace the selected word or phrase with the word or phrase in the “Current Word” box, click Replace.


List of Suggestions

If HotDog can not find the word you are looking for in the Thesaurus (probably because it is misspelt) then it give you a list of closest suggestions.


frmSpell - context help only.


Word not in Dictionary

This box displays the word that is not in the dictionary (usually indicating it is misspelt). Select the correct word from the list of suggestions below, or click Ignore.


Change To

The Change To box lists the word that HotDog suggests is the correct spelling of the misspelt word. If you click Change or Change All then this word will inserted over the currently selected word.


Suggestions

To display a list of alternatives for a misspelled word, click Suggest.


Ignore

To leave a word in the Not In Dictionary box unchanged, click Ignore.


Ignore All

To leave all instances of the word in the Not In Dictionary box unchanged in the current document, click Ignore All.


Change

To change the word in the Not In Dictionary box to the word in the Change To box, click Change.


Change All

To change all instances of the word in the Not In Dictionary box to the word in the Change To box, click Change All.


Add

To add the word in the Not In Dictionary box to the user dictionary, click Add.


Suggest

To display a list of proposed alternatives for a misspelled word, click Suggest.


Image Thumbnails
Multimedia Manager

The Multimedia Manager lets you quickly preview a directory of images or sounds. This is useful when you have to find a single image or sound among an entire directory of them.

What do you want to do?

 Open the Multimedia Manager.

 Preview some Images/Animations.

 Process an Image.

 Preview some Sound Files.

 Insert a Image or Sound into your document.

 Create a Web Page displaying all the Images previewed in an HTML Table.


Open the Image Thumbnails Window.

  First open the Local File Manager:

•	On the View menu, select the “Multimedia Manager” submenu.


Create a Web Page displaying the Image Thumbnails in a Table.
Create a Web Page displaying all the Images in the Preview Window.

  After previewing a directory containing images:

•	Click the “Make Table” button in the Image Thumbnails dialog.

This starts the Image Thumbnail Table Wizard.


Choose an Image for Processing.
Choose an Image for Processing and Inserting an Image into your document.

  To process an image (i.e., change it’s file format, compress it etc.):

1	Right click over an image thumbnail in the Image Thumbnails dialog.

2	Select “Preview/Convert”

This starts the Image Processing dialog.

  To insert an image into your document:

1	Right click over an image thumbnail in the Image Thumbnails dialog.

2	Select “Insert Image”.


Drive Box

This list box contains all the drives your computer is connected to. A drive can be a hard drive, a CD-ROM a network drive and more. Use the drive box to select drive that contains your multimedia files.

  Overview


Directory Box

Use the directory box to navigate to the directory that contains your multimedia files.

  Overview


Category Box

By clicking on each of the multimedia categories in turn, you can view (and hear) the multimedia files in the currently selected directory and drive.

  Overview


File Properties Box

This panel contains all the file properties of the currently selected multimedia file.

 Clicking the “Preview” button does one of the following:

•	If your currently selected file is an Image, the file is displayed full size.

•	If your currently selected file is a sound file, the file is played.

  Overview


Preview Window

This window does one of the following:

•	If you are currently previewing images or animations, each file is displayed in a miniature (thumbnail) form.

•	If your currently previewing sounds, icons representing the sounds are displayed.

  Overview


Preview some Images/Animations

Use the drive and directory list boxes to navigate to the directory containing your multimedia files.

In the Categories box, select the multimedia file type you want to preview.

 To view a thumbnail full-size:

1	Click on the thumbnail image to select it.

2	Click “Preview”

Tip

•	You can open an image into Paint Shop Pro™ by right clicking the image and selecting “Open in Paint Shop Pro”.

•	If your directory contains more than 12 images, use the arrow buttons [image] to view more thumbnails.


Process an Image

 To process an image (i.e., convert it’s file format etc.):

1	Right click over the Image.

2	Select Preview/Convert.

This opens the image into the Image Processing dialog.


Preview some Sound Files

Use the drive and directory list boxes to navigate to the directory containing your multimedia files.

In the Categories box, select the multimedia file type you want to preview.

 To hear a sound played:

1	Click on the sound file to select it.

2	Click “Preview”

Tip

•	If your directory contains more than 12 sounds, use the arrow buttons [image] to view more sound icons.


Insert a Image or Sound into your document

 To insert a link to a sound or image in your currently opened document from the Multimedia Manager:

1	In the Preview Window, click on the Image or Sound you want to insert.

2	Click either the [image] or the [image] button.


List of Thumbnails

This window contains thumbnail views of all the pictures in the current directory specified by the Local File Manager.

  Overview


Make Table

If you want to make a HTML table out of the all the thumbnail images, click this button.

  Overview


Refresh

If you have changed any of the images in the directory you are currently previewing, click the “Refresh” button to update the Image Thumbnail dialog.

  Overview


Stop

If the Image Thumbnail dialog is taking to long to display all your images simply click the “Stop” button.

  Overview


Forward

If you have many images stored in the directory you are previewing, you may need to click the “Forward” button.

  Overview


Backward

Use the “Forward” and “Backward” button to scroll through different windows of images.

  Overview


Insert Image Thumbnail Table

The best way to display lots of pictures in a web page (e.g., for a photo album) is to use a thumbnail table. A thumbnail table contains a small quick loading picture (called a thumbnail) for every picture you want to display. A visitor simply clicks on the thumbnail they want to see, and they follow a link to the full picture.

The Image Thumbnail Table Wizard automatically generates the image thumbnails table and all the associated image web pages from a directory of images.

What do you want to do?

 Start the Image Thumbnail Table Wizard.

 Learn more about different image formats.


Start the Insert Image Thumbnail Table Wizard.
Start the Image Thumbnail Table Wizard

 To start the Image Thumbnail Table Wizard:

•	On the Insert menu click on “Image Thumbnail Table…”.


Directory of Images

This is the directory where all the pictures that will form part of the Image Thumbnail Table will be generated from. To create a thumbnail table from pictures stored in multiple directories you will first have to move all the images you want to the same directory.

  Overview


Directory to save Thumbnails

Choose a directory in which to save all the image thumbnails. If you are using WebSites, this directory should be either in or under your document directory.

  Overview


Copy Original Images

Keep in mind that HotDog is creating many new thumbnail images, one for each of your main images. At the end of the day all these images will have to be uploaded to your server. To simplify this process it is easiest to have HotDog automatically copy your full sized images to the same directory as where your thumbnails are being created.

  Overview


Thumbnail Height and Width

Typical thumbnails are between 50 and 70 pixels in size. By keeping the original aspect ratio (that is the ratio between an images height and width) you will avoid distortion.

  Overview


Keep Aspect Ratio

A long thin image that is shrunk to a box of 70x70 pixels will appear distorted. By maintaining the aspect ratio of an image you avoid the distortion but some images will have large borders.

70x70 Image Thumbnails

Maintained Aspect Ratio	Did not maintain Aspect Ratio.
  Overview


Select File Format

The GIF file format is usually used for compression of small images as it is generally more efficient than JPEG compression. However, if your thumbnails are much larger than about 50x50 pixels, JPEG compression may create smaller file sizes.

  Overview


File Details

As part of each thumbnail, HotDog can also list the File Name, File Size and Image Size of the original picture.

  Overview


Number of Columns of Images

Enter the number of columns you want in your Thumbnail Table. Typical values are between four and eight.

  Overview


Show Border

Check this box if you want your Thumbnail Table to have a border.

  Overview


Extra Context ID’s for various things I have forgotten. Nnnn (note)


Favorites Box

A Favorite directory is one that you commonly use (such as a graphics directory). By selecting a directory from this list, HotDog automatically opens it for you.

  To add a directory to the Favorite Directories list:

1	Right click in the Directories window of the Local File Manager.

2	Select “Add the Favorite Directories”.

  Overview


File Types Box

Lists the types of files to display. This is useful for narrowing the list of files displayed to only those files you're interested in.

  Overview


Directories Listing

This window displays the directory listing of your local hard drive. By clicking on a directory, the files it contains are displayed in the File List below.

  Overview


File List

The File List displays all the files in the currently selected Directory. These files are then further narrowed down by the selection in the File Types box.

  Overview


HTML Property Sheet

The HTML property sheet helps you code HTML. It contains all the tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer.

  Overview


Tag List

The Tag list displays all the HTML tags and their associated colors.

 To insert a tag into your document, do one of the following:

•	Place the cursor in your document where you want to insert a tag.

•	Highlight some text.

2  Double click on the tag you want to insert.

  Overview


Shortcut Keys

Use shortcut keys as a quick way of inserting Tags into your document.

 To define a shortcut key for a Tag:

1	In the Tag Manager, click on the Tag you want to add a shortcut key to.

2	Select the ALT, CTRL, SHIFT and key combination you want to use for the shortcut.

3	Click OK.

  Overview


Clear

This button removes the shortcut key from the currently selected Tag (in the Tag Manager).

  Overview


Shortcuts List

This list contains shortcuts to various applications, such as Notepad etc. Double an icon to open the associated program.

  Overview


SuperToolz List

This list contains shortcut keys for all the SuperToolz you have installed in HotDog. Just double click on the SuperTool you want to start.

  Overview


Extended Character List

This list contains all the extended characters that HTML supports. Double click on a character to insert it into your document.

  Overview


FTP Server List

This list contains all the server addresses you have defined as well as a link to the create new Internet connection wizard. To open a server, just select it from the FTP Server List.


FTP Server File and Directory List

This window contains a list of servers, or a list of the files in a server directory.

  You can do one of the following:

•	Double click on a server to get a listing of all the files and directories it contains.

•	Double click on a server directory to get a listing of all the files and directories it contains.

•	Double click on a file to open it for editing inside HotDog.


Filename

To specify the document that you want to open or find, type its name in the File Name box.


Files of Type

Lists the types of files to display. This is useful for narrowing the list of files displayed to only those files you're interested in.


Insert Text into New Document

The imported text is to add to a new document.

  Overview


Insert Text into Current Document

The imported text is to be inserted into your current document, beginning at the position of the cursor.

  Overview


Message Text

This text appears on a dialog box when the user opens your template (or publishes your document, depending on what options you have chosen previously). Your message should prompt the user for some information, such as their name etc.

  Overview


Default Value

If a user enters no information into the dialog box, this text will be displayed instead.

  Overview


List of data that HotDog can enter

This list shows all the different information HotDog can enter into automatically into your document for you.

  Overview


Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion Background and Discussion


WebSites - A Beginners Guide

1. What are WebSites?

A WebSite is a collection of (usually) related documents and media stored on the same server. A WebSite can contain any number of web pages. Maintaining a WebSite which contains many web pages (even 100's) is near impossible without the correct tools. Fortunately HotDog comes with the latest arsenal of WebSite maintenance tools.

You have to create all the documents that form part of your WebSite. The first question to ask is where are you going to store them? Some forethought at this stage, when your WebSite only consists of a few files, will help immensely when you are dealing with 100’s.

Say you are creating a WebSite three themes: About Yourself, Art and Literature. For example, you might have the following files:

Welcome Page

index.html

About Yourself Theme	About Art Theme	About Literature
About_Me.html My_Job.html My_Interests.html	AirBrush_Art.html Oils.html WaterColors.html	Borges.html Lovecraft.html Cervantes.html

A strongly recommended directory structure you could use on your server is below:

Here is where your files are stored:

Directory	Filename
root* root/me root/me root/me root/art root/art root/art root/lit root/lit root/lit	index.html About_Me.html My_Job.html My_Interests.html AirBrush_Art.html Oils.html WaterColors.html Borges.html Lovecraft.html Cervantes.html	*What is the ‘root’ directory? All HTML files on a server, if they are to be seen by others on the Internet, must be stored in or under a special directory. This directory can be called “www” or “public_html”. However, it can have any name and your ISP will have to tell you what it is. In the example shown left , this special directory is called “root”. It could equally be called “www” or “public_html”

The advantages of this directory structure are:

•	Organization.

You can pretty much guess immediately which file will be stored in what directory. Imagine if your WebSite had over 2000 files, stored all over the place.

•	Expandability.

If you ever wanted to add more themes, or expand upon a current one, it is easy for you to do so.

2. Mirroring your WebSite

A key element to WebSite maintenance is having two complete copies of your WebSite. The server copy is what people view on the Internet. Use the local copy of your WebSite (i.e., the copy of your WebSite actually on your hard drive) to make to modifications and improvements. This technique of having two copies of your WebSite is known as “mirroring.” It is important to duplicate the directory structure of the server as well. For example, the directory structure of your local copy of the WebSite could look as follows:

C:\Program Files\Sausage\HotDog5\HTMLFiles\index.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\me\About_Me.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\me\My_Job.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\me\My_Interests.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\art\AirBrush_Art.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\art\Oils.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\art\WaterColors.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\lit\Borges.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\lit\Lovecraft.html

C:\Program Files\Sausage\HotDog5\HTMLFiles\lit\Cervantes.html

In this case, you would define the Base Directory of your HotDog WebSite as:

C:\Program Files\Sausage\HotDog5\HTMLFiles\

(“Base Directories” are discussed below)

Keeping two copies of your WebSite, one on your local machine, the other on the Server lets you think of WebSite wide operations instead of just document operations. This is very important when you are dealing with many documents.

For example, say you have modified five web pages in the local copy of your WebSite, and you want to upload these changes. If you don’t have a local copy of your WebSite then you will have to remember the name of each and every file you need to upload, as well as the precise directory they have to be uploaded to. However, if you have a complete local copy of your WebSite, to upload your changes all you need do is tell HotDog to re-upload your WebSite, with the option to only upload documents that have been modified. HotDog then takes care of all the details.

Storing your WebSites in this way gives you not only helps with uploading. Having a complete local copy of your WebSite gives you other advantages as well. For example, you can perform WebSite wide find and replaces, apply changes to the body tag of all HTML pages in your WebSite and more.

3. What is the Base Directory

To create a HotDog WebSite you have to tell HotDog where the local copy of your WebSite is to be found. In the example above, your WebSite is stored in the C:\Program Files\Sausage\HotDog5\HTMLFiles\ directory, i.e., all the files that form part of your WebSite are inside, or in directories that are under, the HTMLFiles directory.

See also:

WebSite Manager Resource Panel (All WebSite functionality is stored here).

Advanced WebSites Tutorial.


What types of Images can be used on the Web

There are two main types of images that can be viewed by other people on the Net. They are GIF’s and JPEG’s. To understand the differences between these types of pictures, you must first have a bit of background as to how pictures are stored electronically.

A picture can be divided up into a very fine grid of pixels. A pixel is the smallest dot that you can see on your computer. Typical computer screens have 800 x 600 or 640 x 480 pixels. Each pixel in the grid is given a location and a color. Because the picture is going to be stored electronically, the color is represented as a number. Then all these numbers are compressed in size. The pictures can be compressed in size easily because for most pictures there are large areas that are the same color (like the sky for instance). When you view this electronic picture on your computer, it is decompressed and then the computer simply rebuilds the grid of pixels.

There are many ways of ordering the grid and different methods for compressing the pictures. The methods to store pictures on the Internet are called JPEG’s (or JPG; this is the same type of file, just a slightly different name) or GIF’s. It is possible to tell what sort of image you are using by the extension.

For example:

Filename	Can be viewed by browsers?
cat.gif	Yes
tree.jpg	Yes
hat.jpeg	Yes
umber.bmp	No
lake.tiff	No
hunt.shg	No
unity.png	Some

There is shareware software available that will convert from any graphics format to any other format. Do a Web search on Paint Shop Pro™.

Where can these Images be Found?

The easiest way to find images is on the Net. There are repositories of pictures and many institutions publish their own pictures for general use (like NASA). If you find a picture that you want on the Net but are not sure as to whether you can copy it, e-mail the person who made the site. Usually they will be happy for you to put it on your own WebSite, along with a credit and a link back to their own site. (This is how WebSites get famous!)

What do you need to create your own Images?

To create your own pictures from scratch you will need access to a scanner. A scanner is a machine (a lot like a fax machine) that copies ordinary photos, pictures or paintings electronically to digital files (such as GIF or JPEG files). You will also need software to manipulate these images. For example, you may wish to add special effects to a picture or to change the contrast. A very well written tool is called Paint Shop Pro™. See if you can get hold of a copy (it’s shareware).

  Related Topics


Image Compression: What is it and how does it Work?

Nearly all files can be compressed without losing any of the original data at all. For example, take the following text:

‘the cat sat on the mat’     --22 characters.

Simple text compression occurs by replacing symbols for common words or letter combinations.

Using the following substitutions where, ‘_the_’ becomes ‘#’ and ‘at’ becomes ‘^’   the text above becomes:

#c^ s^ on#m^      --12 characters

0% compression means that the file has not changed size. 99% compression means the file is now only one hundredth of its original size. In the case above the file has been compressed by about 45% using only 2 simple substitutions.

Images, especially photographic images, are harder to compress. This is because they infrequently contain identical strings of characters that can be easily substituted. Many different solutions have been devised to solve this problem, one of the most successful being JPEG compression. To be precise, the JPEG solution is not true compression. As you compress your image, more and more information is lost. If you compress an image too much it looks pixelated and chunky. However the power of JPEG compression is that you can heavily compress a picture before it begins to look perceptibly different. Compression levels of up to 50% are common.

This is why BandWidth Buster offers you manual control of the compression of your images. You can decide better than any computer the trade-off between image quality and file size.

  Related Topics


Re-sizing Images

There are two ways of re-sizing images. You can either leave the file size as its original size and just render the image in as a smaller size, or you can make the image smaller by actually altering the images size (and hence the image's file size). WebSites commonly have many pictures. Those WebSites that specialize in pictures (known as galleries) frequently employ the use of thumbnail pictures. A thumbnail picture is a small (read - has a small file size) version of the original picture. When the picture is clicked on, it displays the larger full size image. This is useful because it allows users to only view the images they want to actually see, thus saving on download time and money.

A common mistake many novice Web designers make is creating thumbnails by using the full file size of an image but displaying it in thumbnail size. This is not very useful because to display the thumbnail sized image, the entire full size image has to be downloaded anyway.


What are LOWSRC Images?

When a visitor loads an image from your Web page, the waiting can be quiet tedious. One solution is provided by HTML. Before loading your main, high quality image, the browser loads another image you provide first. This image is a highly compressed picture that, as a result, is usually of low quality. This image is loaded quickly by the browser and gives the user an idea of the images to come, so hopefully they will stick around. Your high quality image is loaded over the top of your low quality image after all the LOWSRC images have been loaded. The result is that a visitor is less likely to feel frustrated about not being able to see content related images. The Insert Image Wizard and BandWidth Buster can automatically generate the LOWSRC files for you.

  Related Topics


Frame Targets

When using frames you will want more control over the visitor's browser. For example, when a visitor clicks a link, you will want to be able to define which frame loads the new page. Fortunately, it is simple to designate which window will load what URL using the TARGET attribute.

For example:

Say you have defined a web page with two frames:

<frame  src="frametoolbar.html" name="toolbar">

<frame  src="FrameWelcome1.html" name="mainpage">

The frames above are called ‘toolbar’ and ‘mainpage’.

To open a URL in either window use the TARGET attribute:

<A HREF="http://www.sausage.com" TARGET="mainpage"> Click here to go to Sausage Software </A>

If the user clicks on this link, Sausage Software’s home page is opened up in the frame called ‘mainpage’.

In addition to using the named frames as targets, you can also use four pre-defined targets:

_blank	targets a new unnamed window.
_self	loads into the window the link is in.
_parent	loads into frameset parent, defaults to _self if no parent.
_top	loads into the full window, defaults to _self if at top.

Use the Insert Link dialog to easily create links with associated targets.

  Related Topics


Inserting Internal Anchors into your Document

An Internal Anchor is a way of inserting clickable links within your document to another part of the same document. For example, if you have a large HTML document with multiple chapters in it, you can create a table of contents at the top of your document, where each line of the contents at the top is linked to the corresponding chapter further down in the same document.

Inserting anchors into your document can be broken down into two steps.

1. 	Adding targets (or anchor) to your document.

2. 	Jumping to those targets.

An Internal Target is a named location within your web page that will be pointed to by the link. The link is what jumps to a target. For example, to create a table on contents with two entries, linking to two different parts of the same document you would do the following:

Create a new document which looks like the following:  (Note: If you have downloaded the HTML tutorials, this file can be found in the Help/Tutorials directory of  HotDog5, called anchor.html)

<HTML>

<HEAD>

<TITLE> Internal Anchor Example </TITLE>

<META NAME="generator" CONTENT="Sausage Software HotDog Professional 5">

</HEAD>

<BODY>

Table of Contents <BR>

Chapter 1 <BR>

Chapter 2 <BR>

<BR>

<BR> .. <!--  Enter about 20 BR’s here -- >

This is Chapter 1 <BR>

<BR>

<BR> .. <!--  Enter about 20 BR’s here -- >

This is Chapter 2. <BR>

</BODY>

</HTML>

Now you have to name the links that will form the chapter headings. These specially named links are called targets.

1	Under the Table of Contents, place the cursor just before ‘This is Chapter 1 <BR>’

2	On the Insert Menu, click ‘Target ID’.

3	A window appears asking you the target name. Enter ‘ch1’.

 Follow the same process for the Chapter 2 link. You have just specified two different parts of your document by using targets. Now you are going to link to these targets from the contents at the top of your document.

Go back to the top of the document.

1	Highlight ‘Chapter 1’.

2	On the Insert menu, click on HyperLink.

3	In the ‘Insert Link’ window, click on the ‘Jump to named target’ list box.

4	Select ‘ch1’.

 Follow the same process for creating a link to chapter 2.

Your HTML code should now look like the following:

<HTML>

<HEAD>

<TITLE> Internal Anchor Example </TITLE>

<META NAME="generator" CONTENT="Sausage Software HotDog Professional 4">

</HEAD>

<BODY>

Table of Contents <BR>

<A HREF="#ch1">Chapter 1 </A><BR>

<A HREF="#ch2">Chapter 2 </A><BR>

<BR>

<BR> .. <!--  Enter about 20 BR’s here -- >

<A NAME="ch1"></A> This is Chapter 1 <BR>

<BR>

<BR> .. <!--  Enter about 20 BR’s here -- >

<A NAME="ch2"></A> This is Chapter 2. <BR>

</BODY>

</HTML>

  Related Topics


Inserting Links - Overview

Creating links in Web pages is the feature that makes the Internet what it is. The World Wide Web could do without images but not links. As such, inserting links into your web page should be as easy as possible.

To insert a plain Internet link (URL),

1	On the Insert Menu, click ‘HyperLink’.

2	In the Insert Link dialog, enter the URL and the clickable description of the link.

You can also use the Insert Link Wizard. This wizard not only simplifies the process of inserting links into a document for a beginner, it also aids in the insertion of other types of links, such as Email links, FTP links, Gopher Links and more.

What do you want to do?

 Learn more about Inserting URL’s into HotDog.

 Start the Insert Link Wizard.

  Related Topics


Absolute and Relative Links

This topic discusses the various advantages and disadvantages of relative vs. absolute referencing (or linking) and then attempts to clearly explain the different HTML syntax behind each method.

The tricks to inserting pictures and other media into your Web page

There are two ways of including media (i.e. pictures, sound etc.) in documents. Some documents like MS WORD actually store the media inside the document while others (such as HTML documents) just point to external media files. Thus the actual media files are not part of the document per se but are stored externally. There are advantages and disadvantages of both and they will be discussed later. This tutorial will explain how HTML files point to their associated media files (or even other HTML files) and the different techniques you can use to point to these files.

The advantages and disadvantages of storing your files externally to a document

Advantages

1	Different documents can access the same media files. This saves space.

2	If you change a document, you only have to ship the changed text file (and not the media files). If the files are stored inside the document, the whole document has to be re-shipped.

Disadvantages

You don’t always know what files are associated with your document. Whereas with WORD, if you copy a document to a floppy, you can be sure that you have all the relevant pictures. If you copy an HTML document to a floppy, you have to be careful to include any related media files. The result is you have more control over the files you use. But then you’ll have to spend about 10 minutes learning how HTML references its files.

How files are referenced in HTML

Basically, you need to tell the browser where the media files for the HTML document are stored (HotDog will do this automatically for you). For example, if you insert a picture called elise.gif into your Web page, this file must be referenced or pointed to in some way from the Web page because the image is stored externally.

There are 2 different ways of referencing external files from an HTML file; Absolute and Relative.

Absolute References

Here is an example of the HTML code for inserting an image using an Absolute Reference.

<img src= "file:///C|/Program Files/HotDog5/htmlfiles/graphics/elise.gif">

The HTML code above can be thought of as:

<image source = location>  where the location is an absolute position of your file (written in a UNIX format).

The location, file:///C|/Program Files/HotDog5/htmlfiles/graphics/elise.gif, when broken down and translated reveals file:// is just like http://,  it just tells the browser to read a file on the local computer and not start surfing the Net.

/C|/Program Files/HotDog5/htmlfiles/graphics/elise.gif  is the UNIX translation for

C:\Program Files\HotDog5\htmlfiles\graphics\elise.gif  This is just the specific location of the picture.

As you can see, the images position is located precisely on the hard drive. This means, if you preview your HTML file anywhere on your computer, the image will be found. The only problem is that when you upload your HTML file to your server, the directory path “C:/Program Files/HotDog5/htmlfiles/graphics/elise.gif” will not exist and so the image will not be displayed.

Relative References

In order to solve this problem relative referencing is used.

Here is an example of the HTML code for inserting an image using a relative reference.

<img src="graphics/elise.gif">

You can think of a relative reference in an HTML file as “Insert the picture ‘elise.gif’ which is in a directory called graphics, below the current directory.

In this case, when loading your HTML file the browser will look for your images in a directory below your current directory called graphics. This means when you upload your files to the server, provided you store all your images in a directory under your HTML file called graphics, they will be displayed. You can store all images and graphics in the same directory, but this will get messy if you create a large WebSite.

Note:

You will notice that the direction of the slashes is different in Windows95 and UNIX. Don’t worry about this as HotDog takes care of all these matters automatically when you upload your files to the Net. (see the FTP section for more details).

Tricks

The whole process of referencing files correctly, even when you upload them to your server, is simple if you mirror the directory structures. If you are uploading a WebSite, HotDog does this automatically for you.

For instance, if your directory structure on your local hard drive is as follows:

  The current directory is called ‘htmlfiles’. The directory ‘html files’ has child directories called ‘audio’, ‘graphics’, ’other’ and a parent directory called ‘HotDog5’. If you store all your HTML files in the ‘htmlfiles’ directory and all your media in the associated media directories, then when you upload all your work the referencing will still be correct, provided the same directory structure exists on your server.

Say the directory structure of your server is:

 The children directories of ‘www’ are exactly the same as the directory structure on your local hard drive. This is what is meant by the term ‘mirroring’. In this case your HTML directory structure is mirrored. To demonstrate this, below are correctly referenced images. In each case the image elise.gif is stored in the graphics sub-directory of the HTML directory. On the local computer, the HTML file is stored in the ‘htmlfiles’ directory on the server. The HTML file is stored in the ‘www’ directory.

The correct HTML code to insert the picture elise.gif on the local computer is:

<img src="graphics/elise.gif">

The correct HTML code to insert the picture elise.gif on the server is:

<img src="graphics/elise.gif">

The references are the same because we designed the directory structure to be that way. Of course it doesn’t matter what the parent directory is above your html directory, this is the key advantage of relative addressing over absolute addressing.

Tip

•	Whenever you create a new document, save it immediately into the default HTML Document Directory. This ensures that HotDog can use relative references because it knows the position of your HTML file.

Examples

Using the picture above as your directory structure, answer the following questions:

Q1.  What is the parent directory of ‘graphics’?

Q2.  What are the children directories of ‘HotDog5’?

Q3.  If I create a link to a file called ‘giants.wav’ in the ‘audio’ directory from an HTML file in the ‘htmlfiles’ directory, what would the path be?

Q4.  If I create a link to the file ‘elise.gif’ in the ‘graphics’ directory from an HTML file in the ‘HotDog5’ directory, what would the path be?

Q5. If I create a link to the file ‘peter.txt’ in the ‘text files’ directory from an HTML file in the ‘htmlfiles’ directory, what would the path be?  (Note, use ‘..’ to mean ‘go up one directory’)

Answers:

Q1. Htmlfiles.

Q2. downloads, htmlfiles, text files.

Q3. “audio/giants.wav”.

Q4. “htmlfiles/graphics/elise.gif”.

Q5. "../text files/peter.txt".

  Related Topics.


URL's, What are they and how to use them.

A URL (Uniform Resource Locator) is an address for something you can access on the Internet. Usually the address will be a Web page. For example, ‘http://www.sausage.com/whatsnew.htm’ is an URL. Most browsers have the http:// as given, so you could just as well enter ‘www.sausage.com’   However, URL’s don’t have to point to Web pages. For instance, the URL ‘http://www.sausage.com/graphics/logos/sausage_silver_white_type_300x140.jpg’ points to an image.

Special Rules

There is a special Web page name you can use called index.html (or index.htm). This Web page name is the default Web page that browser will display if no Web page is specified in the URL. For instance, if you enter ‘www.sausage.com’ into your browser, you will see sausage software’s home page. What you are actually seeing is http://www.sausage.com/index.htm. Now you are designing your own Web pages, you can take advantage of this fact. The index.html page is your welcome page. It should be used as a jumping off point for all your other Web pages.

Example

When HotDog asks you for a URL, it is asking for the address of some resource on the Internet. This could be a Web page, image or sound. All you have to do is know what the address is and you can link to it.

For example, say you wanted to link to favorite band, ‘They Might Be Giants’. First of all you need to find the address for their WebSite. In the course of your searching you come across a Web page and decide that this is the page you want to link to. Now you must find the URL or address of the Web page. Usually, somewhere near the top of your browser, there is a box displaying the address of the page you are viewing:

 The URL is ‘http://www.tmbg.com/’. Note, the last slash is not necessary but is technically correct. You will notice if you follow any of the links in the site, the address will change. For instance, if you follow ‘melody link’ the URL becomes ‘http://www.tmbg.com/melody/index.html’. An exact break down of the URL is possible. The Web page pointed to by the melody link is called index.html and is stored in the melody directory on their server. Because the filename is index.html, you could just enter the address http://www.tmbg.com/melody/ and you would see the same Web page.

Inserting a Link to Another Web Page.

Now you know the URL of the Web page, inserting a link to it from your own Web page is easy.

1	On the Insert menu, click ‘Insert HyperText Link’.

2	Next to the URL box, click the ‘Files’ button.

3	Enter the URL of the They Might Be Giants WebSite, ‘http://www.tmbg.com’.

4	Enter the description of the link (i.e., the clickable part) ‘They Might Be Giants’.

The result looks something like this on the visitor’s browser:

Click here to visit the They Might Be Giants Web page.

Tips

Sometimes you will follow a link to a Web page but will be unable to find the introduction to the whole WebSite. For example, you might have found the download page for a WebSite but are unable to find any links to the introduction page. Most times you can find this page by directly entering obvious URL’s yourself.

Example

You are at the Web page: http://www.dummyname.com/download/downloadpage.html

If you wanted to try and find the welcome page to this site (i.e., the index.html page), try entering the following URL’s into your browser:

http://www.dummyname.com

http://www.dummyname.com/download

In all likelihood, one of the following URL’s would have the information you need.

URL’s in HTML

Now you know what a URL is, how do you insert one in HTML?

The basic HTML syntax for a URL is:

<A HREF="http://www.sausage.com"> Clickable Text </A>

The <A> tag (anchor) sets up the beginning of the URL. The HREF (Hypertext Reference) attribute inside the A tag defines the address of the URL.

Notice how the clickable text is managed? - It is inserted between the <A HREF=”…”> or “Turn Hypertext Link on” and </A> or “Turn Hypertext Link off”. Any text you insert between the <A> and </A> tag will become clickable.

In fact if you have a closer look at how images are made clickable, you will see it is just an extension of this principle:

<A HREF=”http://www.sausage.com”>

<IMG SRC="graphics/pic.jpg">

</A>

Put simply, the image has been placed in the middle of the <A> tag (or has been wrapped by the URL), and is now clickable.

  Related Topics


How Forms work - discussion
How Forms Work: Discussion

Each form element you use has a name. When the visitor submits a form, you are e-mailed the name of the form element along with the visitor’s input.

For example, if you used a text element with the name “namebox” and the visitor entered “J. Dee” and then submitted the form, you would be e-mailed the following text:

&namebox=J.+Dee

(The above output comes from this HTML: <INPUT TYPE="text" NAME="namebox" VALUE="Enter your name here" >)

There are two things to notice here. One is that the visitor’s reply is prefaced by the name of the text box they used. This highlights the importance of giving all the form elements meaningful names.

The second thing is that the form is not very readable. Many strange characters have been inserted into the text. These characters are the result of the format that browsers use to submit the details of the form. If you want to try to format the data into a more readable form you will have to use CGI.

What is CGI?

CGI (Common Gateway Interface) is a computer language, commonly PERL, that reads and reacts to the visitor’s submission. The CGI program must be stored on the server. If you want to use more powerful aspects of HTML, such as setting up a searchable database on a server, you will need access to the server and a lot of programming experience which is well beyond the scope of this help. Furthermore, most ISP’s are reluctant to let you place CGI programs on their server as CGI programs can be security risks.

However, all is not lost. Many ISP’s already have some CGI programs on their server and one of these is usually designed to clean up the output of form-submitted data, make it more readable and then e-mail it to you. To use this resource you will have to e-mail your ISP to get the particulars. But the HTML code will look similar to below:

Instead of submitting your form as follows:

<FORM METHOD=POST ACTION="mailto:your@email.address">

use;

<FORM METHOD="get" ACTION="/cgi-bin/">

 The ACTION here is pointing to a program on the server.

How to get Forms Working for users of Microsoft Internet Explorer

While users of Microsoft Internet Explorer can not use forms to submit their information to an email address, most ISP’s have simple CGI scripts on their servers designed to clean up the data sent from the form, and then pass it on to you. So, email your ISP and see if they can help you.

Sizing problems

You will notice some difficulty in sizing the form elements. This is a problem with the way that browsers render the form elements and not a bug in HotDog. You may have to try experimenting with different sizes to get the effects you desire. Try putting only one form element per table cell.


Forms example

Just copy and paste this code into HotDog. Remember, only Netscape is able to send the form details directly to your computer.

(Don’t forget to add your own e-mail address in place of ‘you@your.email.com’

<HTML>

<HEAD>

<TITLE> Test Forms Document </TITLE>

</HEAD>

<BODY>

<H2> Example Form Program </H2>

<FORM METHOD="POST" ACTION="MAILTO:you@your.email.com">

<INPUT TYPE=HIDDEN NAME="form_information" VALUE="Tomais Norton Survey. Form created on 8/8/97">

<INPUT TYPE="checkbox" NAME="Own_Computer?" CHECKED> Do you own a computer? <BR>

<INPUT TYPE="checkbox" NAME="WIN_95"> Do you use Windows 95? <BR>

<BR>

<BR>

If you are a member of the Nephilim Society, please enter your password below: <BR>

<INPUT TYPE="password"  NAME="password_box" SIZE=8 MAXLENGTH="8"> <BR>

<BR>

<BR>

Have you read any books by Jonathan Dee? <BR>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="Yes">Yes <BR>

<INPUT TYPE="radio" NAME="Read_Dee" VALUE="No">No  <BR>

<BR>

<BR>

Would you recognize the 'yellow sign'? <BR>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="Yes">Yes  <BR>

<INPUT TYPE="radio" NAME="seen_yellow_sign" VALUE="No" CHECKED>No  <BR>

<BR>

<BR>

<INPUT TYPE="text" NAME="namebox" VALUE="Enter your name here..." SIZE="40" MAXLENGTH="25">  <BR>

<BR>

<BR>

Have you read any of the following books? <BR>

<SELECT NAME="Book_Read" MULTIPLE SIZE="5">

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION> Journal of Tomas Norton

<OPTION> The Magus

<OPTION> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

<BR>

<BR>

Which book was your favorite?<BR>

<SELECT NAME="Favorite_Book">

<OPTION VALUE="None_Read" SELECTED> Have not read any books

<OPTION> Compendium Maleficarum

<OPTION> Middle English Literature and Its Background

<OPTION> Journal of Tomas Norton

<OPTION> The Magus

<OPTION VALUE="Abramelin"> The Book of the Sacred Magic of Abramelin the Mage

<OPTION> The Discoverie of Witchcraft

<OPTION> The Rosicrucian Enlightenment

<OPTION> Malleus Maleficarum

</SELECT>

<BR>

<BR>

How could I improve this WebSite? <BR>

<TEXTAREA NAME="thoughts" ROWS="4" COLS="40"> Please enter your thoughts here...</TEXTAREA>

<BR>

<BR>

<INPUT TYPE="reset" VALUE="Clear All">

<INPUT TYPE="submit" VALUE="Send!!!" >

</FORM>

</BODY>

</HTML>

  Related Topics


Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to SuperToolz Help Jump to


Visual Table Editor

 On the Supertoolz menu, click ‘Visual Table Editor’.

If the Supertool is not in the menu, you will need to install it.


Description of Visual Table Editor

xxxx

How to install.

How to run.

How to get Help


Dont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text belowDont mess with the text below


Easter Egg
The HotDog Team

Nugget
Nugget is our Project Manager. Unlike most Project Managers, Nugget can do more than just manage. He can also draw pictures (He did the dog, not the ones you see here). Coming from a history of table top dancing, architecture and many many parties he rules the HotDog team with an iron fist. (Surely a metaphor for beer).

MrKistic
Tech support are to scared to talk to him because he keeps a long knife by his desk. They have good reason to be afraid. Kistic is not like the rest of us. To keep his hair out of his face he shaved his head - except for the top bit. He looks like an inverted monk now. And in truth, that's what he is. A lot like the Dalai Lama he looks after the little people, but unlike the Dalai Lama, he’s not adverse to a beer and a bit of bloody violence. You knowessssszz it boyeeeeeeeeeeeeeee.(www.gascooker.com).

Physics
Don’t cross Physics. Or he’ll get you. When Physics isn’t maiming senior programmers in one of those occasional, bizarre office ‘accidents’ he can be found coding and tech writing for HotDog. Physics keeps a mirror above his desk, permanently trained on Kistic. You can never be too careful when it comes to avoiding the occasional revenge office accident.

Sav
Sav is the master of the quip. We are fortunate that on most occasions he chooses to quip for good and not for evil. To be on the receiving end of one of Sav’s evil, barbed quips is to experience a negation of self for which only a transcendental Buddhist of the ninth order is truly prepared. We treat him with respect.

Mr. Gaylard
M.G. is a Surfie. Each day he comes in to the office muttering phrases like “Hanging 10” and “Tubular.”
Next to his desk stands his favorite board “Thunder Boy.” If given half a chance he recounts stories about waves and acid trips he has known. We have learnt not to ask him about the fuzzy days in his past.

Kin
Kin is the most aggressive member of the HotDog team and also the shortest, but I’m sure they are not connected. Kin knows karate and looks a lot like Bruce Lee. He is also short like Bruce Lee. Standing at only 5 foot tall, Kin can make some mighty impressive kicks and he is also one of the best programmers in Australia. With credentials like that, not being able to ride the roller coaster at fairs and carnivals probably doesn’t bother him.

Toonz
Toonz used to be a tactical officer aboard the HMAS Canberra. Surprisingly he saw some action in a brief flurry of conflict between New Zealand and Australia over trade tariffs. Fortunately the war only lasted nine days and Toonz was able to retire honorably and become a programmer. We talk quietly near him at work in case he experiences another one of his ‘episodes’.

Bwian
Brian is an advocate for the CHURCH. That's the real reason why he wears his hair like a monk - not because of premature balding, as some people have suggested. His church is special, instead of a trinity it has a holy quaternary made of Steve, Marty, Peter and Tim. Several times a day Brian offers prayers to his heathen gods. His prayers have never been answered. Currently Brian is the only member of his church.


Style Sheet Manager

Style Sheets (or more fully, cascading style sheets) are a new implementation of HTML. They allow a user to create his or her own HTML tags. These HTML tags can contain font effects, background effects or border effects. However, the true versatility of style sheets is not initially apparent because you only need define the style sheet in one location and all your other Web pages just point to this location to use the style information contained there. You can change the style of your whole WebSite by just changing the definition of your style sheet.

Unfortunately, Web browser companies such as Netscape and Microsoft have been extremely slow to implement style sheets into their browsers and are currently only partially implemented.

What do you want to do?

 Find out more about Style Sheets and how to best utilize them.

 Create a new Style Sheet

 Insert a Style Sheet into a document.

 Delete a Style Sheet.

 Add a Remote Style Sheet link in your document.

 Notify the Syntax Manager that you have created a new tag.

  Related Topics


How do Style Sheets work

When you create a style sheet, you create a new tag or class (tags and classes are similar, differing mainly in implementation).

Each tag or class that you create can specify font types, colors and sizes, or change how objects (images etc.) sit within your Web page. As well as creating your own tags and classes from scratch, you can also modify standard HTML tags. For example, the default nature of the <TD> tags makes the text align left. You can change the default alignment of the text to center or to the right.

For example, have a look at the following code:

<HTML>

<head>

<title> type_Document_Title_here </title>

<style type="text/css">

<!-- /* begin hiding style definitions from old browsers. */

/* hotdog style name="StyleA" */

big {

font-family: "Arial";

font-size: "15pt";

color: "#FF80C0";

font-weight: "bold";

font-style: "italic";

";

}

/* End hiding */  -->

</style>

</head>

<BODY>

<big>Big Text</big>

</BODY>

</HTML>

(Note: The text above can simply be pasted into HotDog and previewed with Internet Explorer - Some browsers do not display style sheets).

As seen above, the code that generates the style sheet sits at the top of your Web page. This code actually defines how the tags or classes you create will act. However, the power of style sheets comes from your being able to keep the style sheet definition in a separate file that is referenced by every Web page. This means that you can change the look and style of your entire WebSite by changing only one file.

In this case, instead of adding your style sheet to a Web page, you add it to a file. This file can have as many styles in it as you want and must be uploaded with your WebSite.

Imagine if you created your own unique tags and could change the properties of those tags simply by editing one file. This is the power of style sheets and HotDog has tried to make the process as simple as possible.

Examples:

If you created a style sheet tag called <H3> that makes text bold - red, then to use it you would type:

<H3> My Text </H3>  The text would be rendered as My Text. On browsers unable to support style sheets, the text would be represented as a normal H3 heading.

If you created a style sheet class called WACK, then to use it you might type:

<DIV CLASS=WACK>

My Text

</DIV>

Remember, in both cases you would have to insert the style sheet definition into your web page.

See Also:

 Creating a new style sheet.

 Inserting a new style sheet.

  Related Topics


HotDog Overview.

Topics

What is HotDog?

Welcome to HotDog Professional 5 - Webmaster Suite. HotDog is an advanced HTML Editor and WebSite Builder. Most programs that let you build web pages hide the HTML that forms their source. While this can be useful for the novice it ultimately limits the type and design of web pages you can build. Rather than hide the HTML code away - HotDog embraces it fully, providing you with many tools that manipulate the power and precision of full blown HTML. Using the HotDog Editor and the HTML Property Sheet you are continually informed about the various properties and attributes of HTML tags. By approaching HTML in this manner we have managed to make it quick and easy to learn while at the same time giving you precise control over the design and look of your web page.

HotDog can be conceptualized as having 3 parts with the HotDog Shell wrapping them all together.	The HotDog Shell contains: 1. The Editor. 2. SuperToolz. 3. Resource Panels.
The HotDog Shell gives you access to Preferences, Toolbars, Common HTML tasks (such as inserting Images/Tables etc.) and online help. Among other things, the Resource Panels are opened and closed from the HotDog Shell.

HotDog helps you learn HTML We put a lot of thought into the design of the HotDog Shell. When designing each dialog, as well as considering ease of use, we also tried to enhance the learning process. So for example the “Insert Table Wizard” not only helps you insert a Table into your web page, it also gives tips on how to use a table and contains diagrams demonstrating the various attributes in tables, such as Cell Padding and Border Colors. The Insert Table Wizard Lots of Help Each dialog also has a Help button. This help button contains links to extended help as well - that is, not only is the functionality of dialog explained, but the background as well. For example, the help for the Add New Internet Connection Wizard expands upon the help contained within the wizard, but also links to the “Beginners Guide to FTP.” This tutorial is typical of many included with HotDog, in that it explains basic concepts and terminology so you have a firm grounding on what is actually going on.		Starting the Table Wizard: • On the “Insert” Menu, click “Table”. The use of wizards gave us the ability to present complex or prolonged tasks a clear and simple manner. For example, adding a new server address to HotDog is explained step by step in the “Add New Internet Connection Wizard.” At the end of the wizard you have not only defined a new Server Address but have hopefully learnt a bit about what a Server is and why you needed to define a Server Address in the first place.  Starting the Internet Connection Wizard: 1. On the “View” menu, choose “Resource Manager” and then choose “Internet Files”. 2. In the Internet Files Resource Panel, click “Add New Connection”.

Customizing HotDog

Flexibility and customizability still remains a key issue in the design of HotDog. All Toolbars are completely customizable and you can define shortcut keys for almost everything. When creating web pages the HotDog team found that being able to quickly insert commonly used tags and text into your document was of paramount importance. To address this issue we incorporated four features into the latest release of HotDog: • Shortcut Keys for HTML Tags. • Shortcut Keys for user defined Macros. • MultiLine Clipboard. • Ability to add Tags and Macros to a toolbar.  The HTML Tag Manager Each HTML tag can be assigned its own shortcut key. This way you can significantly speed up the editing process. Some common tags to associate with shortcut keys might be the <BR> and <FONT> tags.   The Macro Manager Frequently more complex text than plain tags needs to be inserted into HTML documents. A common example  is the <BODY> tag or Meta tag information containing search terms. Perhaps you just have a common font effect you want at your finger tips. Using the Macro Manager you can build your own tags. Furthermore, these tags automatically wrap around highlighted text when you insert them.  For example, say you have defined a Macro with the following values: Text Before   :  <FONT COLOR=”#CCCCCC”> Text After      :  </FONT> Shortcut Key :  CTRL + ALT+ G If you highlight some text in your document and press CTRL + ALT + G - the text will be automatically wrapped with the font tags: <FONT COLOR=”#CCCCCC”>…some text…</FONT>  The Multiline Clipboard When working with a few documents it is convenient to be able to store a few pieces of different text. The Multiline clipboard is a floating clipboard that can store as much text and colors as you need. Just copy any text you want to save and paste it in to the Multiline Clipboard. Drag and drop out any text you want to paste into your document.   Adding Tags and Macros to a Toolbar Being able to create your own toolbars and then add your own buttons to them is vital if you are going to be using HotDog as your chief editing tool. Not only can you add Tags to a toolbar, but you can also add your own Macros.  Preferences You can customize just about anything in HotDog. If you use an editor for a long period of time you have to be able to adjust the look and feel of the editor to your own needs.  The Preferences window lets you change how HotDog operates. These changes can affect: • The Editing Window • Rover • WebSite Directories • Browsers • Dictionaries • Publishing		Creating a shortcut key for a HTML Tag. 1. On the “View” menu, choose “Resource Manager”, then choose “HTML Tags”. 2. Select the Tag you want to add a shortcut key to 3. At the bottom of the “HTML Tags” manager select a shortcut key. The Macro Manager • On the “View” menu, choose “Resource Manager”, then choose “Macro Manager”. Adding a new Macro • In the Macro Manager, click “Add New Macro”. Adding a shortcut key to a Macro 1. In the Macro Manager, click on the Macro you add a shortcut key to. 2. At the bottom of the Macro Manager select a shortcut key. Customizing Toolbars • On the “View” menu, choose “Toolbars” and then choose “Customize”. Adding macros and tags to your Toolbars • In the Customize Toolbars Window, click the “Tags” tab and then drag and drop any tags you want to add to a toolbar. • To add a Macro, click on the “Macro” tab, and drag and drop any macros you want to add to a toolbar. Multiline Clipboard • In the “Edit” menu choose “Resource Manager” and then choose “Multiline Clipboard” Changing Preferences • In the “Edit” menu, choose “Preferences”.

The HotDog Editor

Each document you open in HotDog is opened and edited using the HotDog editor. Usually editors are only given brief consideration by users because by all outward appearances they look the same. The HotDog editor is deceptively powerful. As well as the basic functions (WRA etc.) listed at the bottom of each document, the HotDog editor can also collapse text and more. Example HTML code (In the example above “MIDDLE” is not a valid value for the ALIGN attribute. To avoid creating simple errors like this, use Code Completion in conjunction with the HTML Property Sheet).		Open a New Document • On the “File” Menu, choose “New”, then click OK.  HotDog has advanced HTML help If you hold your mouse over a tag or attribute, popup help appears giving you a short description of the tag or attribute. For example, if you hold the mouse over the BORDERCOLOR attribute in the TABLE tag, a popup message appears saying “Sets border color used to draw a 3-D border”

Typical ToolTip Help

Tag and Attribute Coloring Changing the color of tags helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. For example, if you are interested in Image tags, then color them green. This way they stand out against all the clutter of surrounding tags. Syntax Validation As you type, if you make any syntax errors, HotDog will notify you immediately. Furthermore, most times HotDog can recognize what the error is and will tell you what part of your tag is incorrect. In any event, HotDog will offer you help describing the full HTML specification of the tag. See the HTML Property sheet described below for more details on how to work with HTML. You can also define which syntax files you use to check your work. For example, to be on the safe side, you might only use the HTML 3.2 syntax file. This means that any tags or attributes that you type that don’t form part of this specification will be highlighted in red. Bookmarks Bookmarks are a quick and simple way of marking certain places within your document. Being able to jump from one place to another in your document significantly speeds the editing process. Collapsible Text Text collapsing lets you collapse, or roll up, different parts of your document. The advantages are clear - when you have finished a part of your web page, be it a table or a paragraph, you can just collapse it and get it out of the way. This way you don’t have to scroll through finished work or risk changing finished work through random key strokes. This tool makes editing larger documents very much easier. If your document is part of a WebSite your bookmarks and collapsed text are remembered - even if you close down HotDog.  Spell Checking HotDog comes with a fully featured spell checker. Follow links from within a document When editing HTML documents we realized how useful it is to open documents referenced from inside your current document. In a currently opened document, right click on a link to another document and select “Open File” to open it, ready for editing. Improved Image Manipulation One of the problems with HTML and images is that you can’t see what the image looks like just by staring at the HTML. HotDog includes mouse over imaging. That is, if you hold your mouse over an IMG tag, a small thumbnail image of the picture appears. This is a quick way to check which image is which. If you want to do serious image manipulation - such as file size optimization, right click over the image and select Preview Image. This window displays all of the image properties. To optimize the image, click convert. There you can choose different file formats, compress your image and more.		Turning on the Tag Coloring • At the bottom of the document, click the <a>Tag button. • Use the HTML Tag Manager to define the colors for the different tags. Turning on Syntax Validation • At the bottom of the document, click the <a>Syn button. • Use the HTML Tag Manager to define new tags. Define Syntax Specifications to use on your document. • Click the “Tags Filter” button, at the bottom center of the HotDog window. Adding/Recalling Bookmarks • On the line you want to add the bookmark, press CTRL+ SHIFT and a number from 0 to 9. • Press CTRL+ a number from 0-9 to recall a bookmark. Collapsing Text 1. First add a bookmark to the block of text you want to collapse. 2. Press CTRL - (minus) to roll up or roll down the text. To Spell Check a Word 1 On the Edit Menu, click “Check Spelling”. Follow Links from within a document • Right click over the link and select Open File. Preview Images • Hold the mouse over an image tag for a second or so. Change Image Formats Right click over an Image tag and select “Preview Image”. Then click “Convert”.
Code Completion and Integrated HTML Help

Code completion gives you a new way of inserting tags and attributes. Because HotDog knows the entire HTML specification, it can present you with all the possible attributes for each tag, and where possible, the values that are associated with each tag (e.g., the ALIGN attribute can only have set number of values, and all are listed in the code completion window). Use the HTML Property Sheet to gain HTML help that dynamically updates with your code completion window as you scroll through each attribute. Opening the HTML Property Sheet 1 On the View menu, select the “Resource Manager” submenu. 2 In the Resource Manager submenu, select “HTML Property Sheet”.	Using Code Completion 1 Click anywhere in the currently opened document. 2 Press CTRL + SPACE. 3 Use the arrow keys to select the attribute or tag you want to insert. 4 Press ENTER to insert the currently selected tag or attribute. 5 Press ESCAPE to close the code completion dialog.

Using the Browser Window in HotDog

HotDog supplies many different ways of previewing your document while you work.  How the different browsers are setup on your system HotDog comes with it’s own internal browser, ready to go. This browser however is fairly primitive, and can not display JAVA or Dynamic HTML. When you first install HotDog, if you have Internet Explorer (I.E.) installed on your system you will be asked if you want to use I.E. as the internal browser, instead of HotDog’s default browser. It is recommended you accept this option. Whatever browser you use as the internal browser, it is called ‘Rover’. Rover is the most unobtrusive method of browsing your documents. If you are using the default browser as Rover and want to display complex effects, use an External Browser. (Press F9). Before completing a web page, have a look at it inside different browsers. Use the External Browser function for this. HotDog will search for and automatically install any External Browsers it finds on your system when you start HotDog for the first time. Setting the Browser size For a professional web designer, one of the key limitations in web page design is how it looks under different screen sizes. HotDog’s internal browsers now incorporate rulers that allow you to expand or contract the size of a web page. This means you can instantly see what your web page looks like under a browser viewed in a 640x480 screen resolution. Furthermore, because the you can slide the rulers, you can gauge how your web page degrades under different browser dimensions. When working towards browser constraints, HotDog gives you perfect pixel control. How to surf from inside HotDog By using the Web browser you can surf from within HotDog. Just open the Web browser and enter a URL into the drop down list box. Downloading web pages, ready for editing If you want to download a web page you have surfed to (including the images!) click the [image] button on the document Toolbar. The web page and its images are downloaded and opened into a new document ready for you to edit! This way you see the tricks different web masters use to create their web pages.		3 different Browsers • Rover • Internal Web Browser • External Web Browser(s) • Click Rov at the bottom of a document to start display Rover • Click Web at the bottom of a document to start the Internal Web Browser • Press F9 to display your document in an External Browser, like Netscape. Setting Different Browser sizes 1. Open the Rover or Web Browser 2. In the Browser window, click on the Width box and select a width (640, 800, 1024) or type in the width you want. Alternatively, drag the slider bar to a new width. • To change the height of the Browser window, drag the top of the Browser window to a new position. How to surf from inside HotDog 1 At the bottom of your document, click “Web”. Downloading web pages from the net for editing 1. In the Web browser, enter the URL of the page you want to download. 2. Click the [image] button.

Resource Managers

As more and more functionality was added to HotDog we had to look for a place to put it. Resource Panels were our solution. A Resource Panel is a floating resizable window that groups similar functionality into the same place. Each Resource Panel performs a specific task related to web authoring. So for example, if you wanted to insert extended characters into your document (such as © etc.) then you would open the Extended Characters manager:   On the View menu, choose Resource Manager then choose Extended Characters. Generally functionality that helps you create web pages but does not actually edit them directly can be found in the Resource Manager. For example, the Internet Files Resource Panel is concerned with the uploading of documents to the Internet. There are however special Resources that do edit your page, such as the Extended Characters Manager which lets insert foreign characters into your document. Resource Panels are opened from the View menu. If you want to show/hide all opened Resource Panels with a single click, click on the “Resources” button located at the bottom center of the HotDog window. HotDog also includes typical Resource Manager presets, such as those that might be used for uploading documents to the Internet. These presets can be found by right clicking on the “Resources” button.		Opening Resource Managers • Resource Manager are opened and closed from the Resource Manager on the View menu. The Resource Manager contains: • Local Files. • Internet Files. • HTML Properties. • WebSites. • Macro Editor. • HTML Tags. • SuperToolz. • Extended Characters. • Netscape Bookmarks. • Internet Explorer Favorites. • Multiline Clipboard. Using Preset Resource Configurations: • On the View Menu, choose Resource Manager, and then choose Presets.

Using the HTML Property Sheet with HotDog

Opening the HTML Property Sheet 1 On the View menu, select the “Resource Manager” submenu. 2 In the Resource Manager submenu, select “HTML Property Sheet”.	The HTML Property Sheet helps you code HTML. It contains all the tags and attributes used by the major browsers, Netscape and Microsoft Internet Explorer. By entering tag attributes directly into the HTML Property Sheet you can save time.  In the example to the left, a user has typed <IMG> and clicked on the SRC attribute in the HTML property sheet. This opens a file picker allowing the user to select an image. Notice the help on the SRC attribute at the bottom of the HTML Property Sheet. There are many different ways you can use the HTML Property Sheet. A few of the most common are described below:  Inserting tags into a document.   Inserting attributes into tags.   Wrapping tags around text (such as the center tag).
State-of-the-art WebSite Management

Webmasters have long been screaming for an HTML Editor with advanced Web site management facilities.  HotDog Professional 5 plugs the gap with full-featured Web site management tools. Inside the WebSite Manager, it’s possible to assign tasks, filter files or perform multiple search and replace procedures on designated files.

To open the WebSite Manager:

1	On the View menu, select the Resource Managers submenu.

2	Under the Resource Managers submenu, click WebSites.

(For more details see the WebSite Manager help.)

HotDog Professional 5 WebSites is based entirely on a local mirror system and does not use proprietary formats to define a WebSite. A HotDog Professional 5 WebSite defines a set of folders and files on a local computer and provides the ability to quickly publish these folders and files to another computer (usually an ISP’s Web server). This makes it possible to create, edit and preview a WebSite on a local computer and then automatically copy the changes to a Web server where an entire audience can see the site via the Internet.

HotDog Professional 5 stores a WebSite definition in a .HWS file. This file contains the following information:

•	The location of the folders and files that have been defined as a WebSite.

•	All of the publishing and upload preferences that have been set for that WebSite.

•	The exact configuration of the HotDog interface and all the Web pages (page positioning, bookmarks, collapsed ranges) when the WebSite was last saved.

•	All tasks, defined, completed or otherwise when the WebSite was last saved.

This file allows HotDog to automate many of the repetitive tasks involved in managing a Web site whilst not changing or affecting an actual Web site file structure or individual Web pages themselves.  More importantly, it allows multiple Webmasters to work concurrently on a single WebSite in a fully team-based environment – Web Site Co-ordinators can completely manage their team from within HotDog.

File Management

HotDog Professional 5 sports a powerful file management interface making it possible to create, add, remove and edit WebSite files within a single view. Drag and Drop files from local or remote file lists to easily add files to a WebSite. Full control is held over Web site structure and it’s easy to re-organize entire folder trees quickly. Choose to apply WebSite features across single or multiple documents, folders or even to an entire WebSite.

Publishing

WebSites makes it easy to upload a site and any associated files that are needed to make the site work properly on a Web server by means of publishing. When publishing a Web site, you can:

•	Publish to a local directory or a remote Web server.

•	Upload any necessary support files (fully customizable).

•	Only upload any changes that have made been made to the WebSite.

•	Replace user-definable sections of Web pages when uploading (for example, a legal notice that’s common to every page).

WebSites Wizard

The HotDog WebSites Wizard turns the process of defining a WebSite into a simple step-by-step procedure. There are three ways to start a HotDog Professional 5 WebSite:

•	Create an entirely new HotDog WebSite and associated file structure.

•	Define a HotDog WebSite from an existing WebSite file structure on a local or networked computer.

•	Define a HotDog WebSite from an existing WebSite file structure on a Web server.

Tasks List

Tasks List is a list of user defined tasks relating to the WebSite which may be assigned from one user to another, or simply as reminders to the current user. Each task can be associated with a particular Web page within the Web site, thus enabling the ability to quickly edit a file without hunting around the entire Web site. Tasks also have user definable priority and status flags to easily track individual task progress.  This feature makes a Web Site Co-ordinator’s job a lot easier by being able to manage their team completely through HotDog.

Error Checker

A built-in mechanism is supplied for error-checking all of the Web page links across an entire site. The Error Checker will automatically:

•	Check a WebSite’s local links, displaying any broken links that it finds.

•	Check a WebSite’s remote links, which can be checked for validity.

•	Allow editing of any broken local or remote links in place and automatically change all references to the link across an entire WebSite.

Resource Checker

WebSites is also supplied with a built-in Resource Checker for locating external resources (links to files outside of the local WebSite folder tree) across an entire Web site. Resource Checker will automatically:

•	Validate a Web site’s local links, displaying any external resources that it finds.

•	Automatically collect the resource and alter all links to it.

•	Allow editing of any external links in place and automatically change all references to them across an entire WebSite.

Local Browser

In addition to the WebSites Manager, HotDog Professional 5 also provides an internal WebSite browser, thus allowing the ability to view a WebSite as it will appear on the Internet. Whilst browsing the site, it’s possible to edit the current page, seeing the changes appear as they’re made.  It’s also simple to add associated tasks for the current page. This is an ideal way for someone who may not be completely HTML literate (but is completely familiar with concepts and what it means to create a WebSite)  to browse a WebSite and quickly and easily coordinate WebSite updates (for example, a Web Site Co-ordinator, who orchestrates, rather than develops, a site project).

Global Web Site Replacement

WebSites possesses the ability to make major appearance changes across an entire Web site.  WebSites can automatically replace

•	Document properties (body tags).

•	Document information (meta tags).

•	Or plain text across Web pages, a folder, or an entire WebSite at once.

Multi-user Interface

WebSites now facilitates multiple users, which means that teams of Webmasters working on a local network are able to define their HotDog WebSite on a shared network drive. Each person working on the WebSite starts HotDog and opens the same HotDog WebSite – that is, the .HWS file, normally located in the top-most folder of a WebSite structure. All changes made to the WebSite are reflected in the other users’ WebSites Managers.

WebSites also features file-locking, so that if one user is editing a Web page via WebSites, it is then locked away from all other users working on that WebSite until the file is closed.

Other Resource Managers…

Local Files The Local File Manager is very similar to Windows Explorer™.  You can use the Local File Manager to manipulate or filter files. Using Drag and Drop, the Local File Manager provides an easy way of inserting links into your documents. The Local File Manager was designed to aid with the file manipulation required of larger WebSites.  WebSites  WebSites are collections of HTML documents. Using HotDog to create a WebSite on your local computer will mean that when it comes time to upload to the Internet, one click is all it will take to transfer your work. Using WebSites greatly reduces the amount of organization required to get you up and running on the Internet.  Macro Manager  The Macro Manager is used to insert text and tags into your document. Its key advantage is that it can insert text before and after selected text in the document.    Supertoolz  For quick access to your Supertoolz, the Supertoolz Manager can be useful. Just double click on any of the Supertoolz to activate them. Remember, you will need to first install some Supertoolz.		Internet Files  Using simple Drag and Drop you can easily transfer files to and from your server. Uploading and downloading files is as simple as dragging them to and from the Local File Manager. The Internet Files Manager also contains the “Add New Internet Connection” Wizard. The Internet File Manager was created as an easy way to quickly upload and download files, while still inside HotDog.  HTML Tags  HotDog comes with a complete listing of all the HTML tags we could find - plus a few more. The HTML Tag Manager is used to define different colors for different tags, create shortcut keys for different tags and for defining your own tags.  Multiline Clipboard  We found that it is very useful to be able to drop commonly used text straight into our documents. The Multiline Clipboard is simply a clipboard with unlimited capacity. It is useful for storing HTML code for commonly used images and colors.  Internet Explorer Favorites and Netscape Bookmarks If you want to insert a link to one of your favorite WebSites, just drag the bookmarked link into your web document and it will be automatically inserted.  Extended Characters  If you need to insert foreign or unusual characters such as  © or ™, use the Extended Character Manager. Just drag and drop the characters you need directly into your document for the correct HTML code to be inserted.

SuperToolz

The ultimate expression of HotDog’s flexibility came with the development of SuperToolz. SuperToolz are plug-in programs designed to work specifically in conjunction with HotDog. SuperToolz allow for the unlimited extension of HotDog's functionality, while at the same time giving users the ability to pick and choose the functionality they want to include in HotDog. Every SuperTool is downloaded, purchased (if not already free), maintained and updated via the Internet from within HotDog itself.  With one click, HotDog will automatically download and install chosen SuperToolz or SuperToolz updates, ready to use immediately and with no fuss.  Note As well as plug-in programs, HotDog can even upgrade itself using the SuperTool architecture. This includes shell upgrades (HotDog 4 to HotDog 5) but also HTML syntax files. Even the AutoDownloader itself can be upgraded. Over the last six months, Sausage Software has released 16 SuperToolz, not including upgrades and updates to already existing SuperToolz.		Finding and Installing SuperToolz • On the SuperToolz menu, choose AutoDownloader. Currently Available SuperToolz • HotDog Express • eVend info Seller • Real Audio/Video SuperTool • ICQ Communications panel wizard • 1st Java Tab and Tree Supertool • Channel Wizard • Multi File Find and Replace • Visual Table Editor • Button Editor • Bandwidth Buster • Imager Mapper • Java Animator • Java Script Language Editor • Java Script Tools • WebSite Downloader • Text Effects

A description of just some of the SuperToolz:

The HotDog Express SuperTool HotDog Express lets you easily create Web pages. Its unique step by step flowing form makes the construction of Web pages for the novice an easy and fun experience. It has been fully integrated into HotDog. This means you can create web pages using HotDog Express and they will be automatically inserted into HotDog, ready for editing. Channels Wizard Creates and configures “Add Channel” buttons for Netscape, Internet Explorer and PointCast.		MultiFile Find and Replace (MFFAR) This tool is used to find and replace many instances of text in many different files. The need for this SuperTool is fairly obvious. If one URL changes in your WebSite you can find and replace all instances of the old URL with the new one. MFFAR can also do some very useful conversions for you as well, such as changing the case of file names or publishing your files ready for upload.  Real Audio/Video SuperTool Using the RealAudio/Video Supertool you can convert WAV (sound) and AVI (video) media files into their RealAudio and RealVideo counterparts. You can also create streaming files with this SuperTool.

Partner Applications.

HotDog5 comes with three best of the breed Internet tools. In combination with PaintShop Pro™, mBed™ and LinkBot™ HotDog now provides you with all the tools you need to become a professional Web Master. The software is registered and ready to go. You can finally own that fully operational PaintShop Pro you’ve always wanted!	Partner Applications from inside HotDog  Open the Partner Applications Toolbar: 1 On the “View” menu, select the “Toolbars” submenu. 2 In the Toolbars submenu, select “Partner Applications”.  On the Partner Applications Toolbar, click on the program you want to start.
mBED Interactor

mBED Interactor is a drag and drop authoring tool for adding interactive multimedia components (called mbedlets) to your Web site. To optimize the interactive multimedia for your target audience, Interactor provides three different feature sets- a Dynamic HTML feature set, a Java feature set, and a complete mBED Interactor feature set. Using mBED you can create advanced effects on your web page including movement, visual changes, and sound. The mBED players can interact with each other and with the user.

Linkbot

Linkbot is an award-winning suite of site management utilities that helps Webmasters maintain, test and organize their sites. Linkbot contains all the tools you need to maintain an error-free site. Linkbot can:

1. Locate broken links, missing images and stale content.

2. Identify unused (orphaned) files.

3. Find large pages with slow download times.

4. Visualize the structure and organization of the site.

5. Isolate subsections of the site using customizable filters.

6. Schedule Web site analyses to automate routine maintenance.

PaintShop Pro

Paint Shop Pro is a full-featured painting and image manipulation program. Powerful features include multiple paint brushes with adjustable attributes and textures, built-in special effects, powerful area selection options, photo cloning and retouching tools, full-featured image enhancement tools including third-party filter support, full color adjustment support, an integrated image browser that allows you to visually search directories for images, advanced World Wide Web graphic file format support, a built-in screen capture utility, batch file format conversion and TWAIN scanner support.  Paint Shop Pro supports more than 30 file formats, making it one of the most versatile graphic manipulation programs available.


Topic Overview
Welcome to HotDog5 - Webmaster Suite

   What is HotDog?

   Customizing HotDog

The HotDog Editor

   Code Completion

   Using Browsers with HotDog

Resource Managers

   WebSites

   HTML Property Sheet

   All other Resource Managers

SuperToolz

    Installing SuperToolz and Updating HotDog

3rd Party Software

    mBED Interactor™

    LinkBot™

    PaintShop Pro™


Displaying the Beginners Guide to FTP help:

1.	On the “Help” Menu, choose “Contents”.

2.	Under the Contents Tab, double click Discussion.

Double Click “Beginners Guide to FTP.”


What is the Internet?

The Internet is a vast number of computers connected together. These computers all have information on them which they share. A computer that shares information with other computers on the Internet is called a Host. When you add up all this information from all the different computers (estimated to be more than 16 million), you can see why the Internet features so heavily in the media. Furthermore, the Internet is growing fast. By the year 2000 it is expected that the Internet will contain well over 32 million hosts. While these figures are impressive (for the easily impressed anyway), a more interesting thought is the social trend that they indicate. Through the use of the Internet, more and more people all over the world can communicate with each other, albeit with only text. But even now the first video communication systems are running - transmitting their information via the Internet instead of expensive satellite systems.

For any computer to be able to share information with another computer, a communication standard must be shared. This means that the computers have to know how to ask for information or indicate that they are sending information etc. The communication standard (or protocol) the Internet uses is called "Transmission Control Protocol/Internet Protocol (TCP/IP)" and all computers on the Internet must speak it. So TCP/IP explains how the information is transmitted over the internet. However, the information itself is formatted as well. For example, a Word™ document and a plain text document may contain the same information, but the format of the information is different.

The World Wide Web (WWW or Web) is a part of the Internet. As such, it still transfers information via TCP-/IP. But all the information that is part of the Web is in a format called HTML.

What is HTML?

Did you ever wonder when you save a word processor document, how the document remembers which words are in bold? What actually happens is that invisible commands are hidden in the document, indicating which text is in bold. HTML is normal text, but the special commands are visible. The document contains the commands required to make text bold, insert images etc. These commands are called Tags and each command lies between angle brackets, '<' and '>'.

The HTML below could be a part of any document:

<B> <I> This </I> is an </B> example.

Think of the Tags above as:

<B> Start Bold

<I> Start Italics

</B> Stop Bold

</I> Stop Italics

If the HTML code above was viewed through a browser, it would appear as follows;

This is an example.

So if you use a Browser (such as Netscape or Microsoft Internet Explorer) to view a HTML document, you will see the formatted text. You use HotDog to write the HTML document. This is why HotDog is called a HTML editor - it helps you write HTML for others to view using browsers.

What are Web Pages and WebSites?

A Web page is a single web document. A Web page can contain text, images, JAVA and more. When you look around the Web, always keep in mind that you can learn from the Web Pages you see. Just right click on any Web Page (using most browsers) and select 'View Source'. This displays the source HTML document (i.e., the document with all the HTML tags in it). You can see how other authors have used HTML.

A WebSite is a collection of Web pages, usually linked together with hypertext links. A hypertext link is a long name for the little clickable pieces of text that, when clicked, take you to another Web page. This process is usually described as following a hypertext link.

To get a Web page on to the Internet, it has to be placed on a computer that is a host. Some hosts provide internet access for many people. These hosts are usually called Servers.

Usually, you connect to a server when you want to use the Internet. Any Web pages you create are stored on the server, which is connected to the internet 24 hours a day. This means that people can view your Web pages all the time.

HotDog provides a complete solution - you can create your web pages using HotDog, and then upload (that is, copy) the Web pages to your server. Later on, when you have many Web pages to manage, HotDog has all the tools you need to manage a complex WebSite.

So what actually happens when a hypertext link is clicked?

1)  Each hypertext link has an address of a computer host and the name of a document on the host. Say you click on a hypertext link that has the address of the following computer host:

www.surfnet.com/~elisefowler/welcome.html

2)  Your computer sends out a message to the host called www.surfnet.com asking for the Web page called welcome.html belonging to elisefowler.

3)  The host then looks in a special directory that Elise uses for her Web pages. The server is looking for a file called welcome.html. If this file can not be found, a message is returned to your Browser. This message is usually along the lines of 'URL not found'.

4)  Assuming the file welcome.html is found, then this file is copied from Elise's host to your host and then onto your personal computer. You can now view the contents of Elise's welcome.html file using your Browser.


Credits and Copyrights

Netscape Communications Corporation has not authorized, sponsored, or endorsed, or approved this help file and is not responsible for its content. Netscape is a trademark and trade name of Netscape Communications Corporation.

Microsoft has not authorized, sponsored, or endorsed, or approved this help file and is not responsible for its content. Microsoft, Windows, Windows NT, Windows 95, Excel, Internet Explorer, MS Internet Explorer are trademarks and trade names of Microsoft.

"The Sentry Spelling-Checker Engine Copyright © 1996 Wintertree Software Inc."

"Danish Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

"Dutch Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

"Finnish Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

"French Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"German Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"Italian Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"Brazilian Portuguese Lexicon Copyright (c) 1997 Wintertree Software Inc."

"Spanish Lexicon Copyright (c) 1994-1997 Wintertree Software Inc."

"Swedish Lexicon Copyright (c) 1996-1997 Wintertree Software Inc."

And thanks to everyone who gave us feedback on HotDog.


What's New in HotDog Professional 5 Webmaster Suite?

HotDog Professional 5 Webmaster Suite contains many new features designed to make it the most comprehensive suite for Webmasters.  Here’s a summary of what’s new:

Partner Applications

Demand from Webmasters has resulted in an integrated suite of Web authoring applications. HotDog comes bundled with three best-of-breed applications for professional Web authoring:

•	Interactor for HotDog.  Instant Dynamic HTML multimedia from mBED.

•	Linkbot for HotDog.  Site analysis and reporting from Tetranet.

•	Paint Shop Pro for HotDog.  Complete image manipulation from JASC.

  Details on Installing Partner Applications.

Enhanced Performance and Usability

Performance has been enhanced to allow an author to edit HTML documents as quickly as possible and decrease time to full scale production.

•	HotDog loading speed improved by up to 200%.

•	Document opening speed improved by up to 300%.

•	Completely customizable workspace to work best for the individual.

•	Startup Configuration Wizard custom fits the product to user competency level.

•	In-depth context sensitive help for complex functions and revised documentation for HTML 4.0.

•	Dynamic loading of dock-panels (as a direct result HotDog is faster and more efficient).

•	Opening and saving a file on a remote server is now as easy as saving to a local drive.

Improved Resource Panels (new for version 5.5)

Resource panels can be viewed on tabs. For view this new feature:

1	Right click on any “Resources” panel.

2	Select “Tab Visible On Left/Right side”.

WebSite Management

Webmasters have long been screaming for an HTML Editor with advanced Web site management facilities.  HotDog Professional 5 plugs the gap with full-featured Web site management tools.

•	With no proprietary Web servers necessary, Web Site Managers can use HotDog to define any file structure as a Web site and perform site-wide editing functions on all of those files.

•	Tasks such as alterations to backgrounds, new meta tags or text block multi-find and replacements are easily achieved with one action.

•	Entire sites can be checked for broken links and errors corrected across many pages with one action, external resources (image files and such) are automatically collected and links updated ready for publishing.

•	HotDog WebSites also support a complete multi-user environment with complete file locking and task management facilities. All site changes are updated on the fly on all users’ machines in a networked environment.

  More Details on Websites.

Advanced HTML Editor Features

The new HTML Editor features in HotDog Professional 5 greatly speed the way Webmasters work without holding them back – unrivalled responsiveness and shortcut keys help authors keep an eye on the code while plugging away at the keyboard.

•	Code Completion puts every compliant attribute, tag and valid data type at the stroke of a shortcut key combination.  Smart contextual menus fly out containing the array of options for the current tag.

•	Advanced HTML Property Sheet with context-sensitive help facilities helps Webmasters become more accustomed to new techniques introduced with HTML 4.0.

•	Collapsible Text ranges improves code readability and dramatically improves productivity.

•	All proportional fonts are now supported which makes code easier to read.

•	Correct line numbering when using word wrap gives accurate readings of current document location when reading and editing long or complex documents.

•	Tool tips for Tags,  Colors, Images and Syntax Errors to quickly view important data at a glance.

•	New built-in Thesaurus.

•	Enhanced printing features.

•	Enhanced support for meta tags, automatic repetition of keywords in upper and lower case, save keyword files for later use make it easy to optimize pages for inclusion in search engines.

•	Multi-byte and multi-lingual character support.

  More Details in HotDog Overview.

Split-view Editing

After researching several Web page creation techniques it was found that Live Document Rendering is a better way to create Web pages.  The more common WYSIWYG approach tends to hide code from authors, leading them to believe that what they see is what their audience will see, which is often not the case.  Professional Webmasters generally find that Live Document Rendering gives them full control over their source code while still providing them with a visual representation in real-time of their eventual Web page.

•	Live Document Rendering via ROVER (Real-time Output ViewER), gives authors an authentic representation of the page being edited in real-time.

•	Browse the Web in the on-the-fly preview window, download any remote page being viewed and open the source in a new editor document.

•	Custom settings for in-line browser size (640, 800, 1024 or custom).

•	Rulers make it simple to see which page elements are aligned to which part of the page, and aid in the debugging process.

Multimedia Manager

Webmasters rapidly collect large amounts of media files that they use throughout their sites. This great new interface brings HotDog-based control to large groups of multimedia.

•	A new thumbnail preview component to quickly browse directories for images, animations and sounds.

•	Free clipart from XOOM makes it simple to grab images and start creating pages from scratch.

  More Details.

HotDog ImageLab

Once images are created, they need to be optimized for the Web.

•	Preview images and check them for prospective download times.

•	Convert images to GIF or JPEG with side by side comparison of changes between old and new images on the fly.

  More Details.

MultiLine Clipboard

•	A new configurable clipboard buffer where up to 100 groups of text or code can be dragged for later use.

•	All clipboard groups can be easily exported to HotDog Macros .

  More Details.

Thumbnail Page Creation Wizard

•	Point this wizard at a folder full of images and instant tables full of thumbnail links are created, without the need for time consuming cataloging.

  More Details.

Revamped Registration Process

•	New, easier to use Registration Process makes it simple to register HotDog Professional 5 Webmaster Suite with a minimum of fuss.


HTML Property Sheet

For the beginner, the HTML Property Sheet offers fun and easy experimentation - unfamiliar with a tag or attribute? - just put a value in it and see how it effects your web page. Also every tag and every attribute has help that is displayed at the bottom of the HTML Property Sheet. With this sort of practice it will only be a short time until you become familiar with the entire HTML language.

For the user who wants their web pages to look great in every browser, the HTML property sheet also presents the tags and their attributes to you in a sorted list. For example, the <TABLE> tag is listed with all the known attributes sorted by different browsers. The result is you can determine easily which attributes to use in which tag to optimize the look of your web page for the most people.

Finally the HTML Property Sheet speeds up your editing. Tags and attributes are inserted into your document with a few simple mouse clicks. In conjunction with code completion you can now create documents faster than ever before.

Remember, the you have to open the HTML Property Sheet:

1	On the View menu, select the “Resource Manager“ submenu.

2	In the Resource Manager submenu, select “HTML Property Sheet”.

Generally there are three different ways the HTML Property Sheet is used:

  A quick way of wrapping tags (such as the <center> tag) around highlighted text.

  A shortcut for the insertion of tags into you document.

  A very quick way of inserting attributes into tags.

  Using Code Completion to insert tags and attributes into your document.

However, the HTML Property Sheet can help you far more than this. For example, all the attributes of each tag are listed by the browsers that support them. So, if you wanted to avoid attributes particular to some browsers, it is easy to do so. Essentially, the guess work is taken out of how your web page will look under different browsers.


HTML Property Sheet - Wrapping Tags around highlighted text

For example, to quickly right align some text, you could do the following:

First open the HTML Property Sheet:

1	On the View menu, select the “Resource Manager“ submenu.

2	In the Resource Manager submenu, select “HTML Property Sheet”.

3	Highlight the text you want to right align.

4	Press CTRL - ENTER.

You are now in the HTML property sheet, navigate to the tag you want to insert by doing one of the following:

•	Use the up and down arrow keys.

•	Type the first letter of the tag you want to insert, then use the up and down arrow keys to select the tag you want to insert.

5  Press ENTER and the tag is automatically inserted into your document.

  For example:

1	Type ‘d’, to go to all tags beginning with ‘d’.

2	Use the arrow keys to select the DIV tag.

3	Press ENTER.

After you have inserted the DIV tag into your document, the HTML property sheet displays the attributes of the DIV tag. Use the ALIGN attribute to align your text.

To set the alignment of your text to right,

1. In the HTML Property Sheet, click on the ALIGN attribute.

2. From the drop down menu, select ‘Right’.

The attribute ‘ALIGN=”RIGHT” is automatically entered into HotDog.

To return to edit mode (as opposed to the Property Sheet mode) either click on your HotDog document, or press CTRL - ENTER.


HTML Property Sheet  -  Quick insertion of tags into your document

  To quickly enter the <layer> tag:

First open the HTML Property Sheet:

1	On the View menu, select the “Resource Manager“ submenu.

2	In the Resource Manager submenu, select “HTML Property Sheet”.

3	Type ‘<la’.

4	The HTML Property Sheet now suggest that you are looking for the <layer> or <label> tag.

5	Enter the HTML Property Sheet by pressing CTRL - ENTER.

6	Use the arrow key to select the <layer> tag.

7	Press ENTER to enter the <layer> tag into your document.

HotDog automatically returns you to the Editor, ready to insert any attributes if you need them.

Press CTRL - SPACE to open Code Completion, ready to insert attributes.


HTML Property Sheet  - Quick insertion of attributes into Tags

For example, to quickly right align some text, you could do the following:

First open the HTML Property Sheet:

1	On the View menu, select the “Resource Manager“ submenu.

2	In the Resource Manager submenu, select “HTML Property Sheet”.

3	Highlight the text you want to right align.

4	Press CTRL - ENTER

You are now in the HTML property sheet, navigate to the tag you want to insert by doing one of the following:

•	Use the up and down arrow keys.

•	Type the first letter of the tag you want to insert, then use the up and down arrow keys to select the tag you want to insert.

5  Press ENTER and the tag is automatically inserted into your document.

  For example:

1	Type ‘d’, to go to all tags beginning with ‘d’.

2	Use the arrow keys to select the DIV tag.

3	Press ENTER.

After you have inserted the DIV tag into your document, the HTML property sheet displays the attributes of the DIV tag. Use the ALIGN attribute to align your text.

To set the alignment of your text to right,

1. In the HTML Property Sheet, click on the ALIGN attribute.

2. From the drop down menu, select ‘Right’.

The attribute ‘ALIGN=”RIGHT” is automatically entered into HotDog.

To return to edit mode (as opposed to the Property Sheet mode) either click on your HotDog document, or press CTRL - ENTER.


Extended Keyboard Map

Useful Miscellanous Shortcuts

Toggle Edit/HTML Property view	CTRL + ENTER
Start Code Completion	CTRL + SPACE
Check Spelling	F7
Preview Document	F9
Format Font	F2

File Menu Shortcuts.

New	CTRL + N
Open	CTRL + O
Save	CTRL + S
Save As	SHIFT + CTRL + S
Close	CTRL + W
Preview Document	F9
Print	CTRL + P
Print Setup	CTRL + SHIFT + P

Edit Menu Shortcuts.

Undo	CTRL + Z
Redo	CTRL + Y
Cut	CTRL + X
Copy	CTRL + C
Paste	CTRL + V
Find	CTRL + F
Replace	CTRL + R
Select All	CTRL + A
Check Spelling	F7

Edit Menu Shortcuts

Image	SHIFT + CTRL + I
HyperLink	SHIFT + CTRL + H
Target ID	SHIFT + CTRL + A
Comment	SHIFT + CTRL + C
List	SHIFT + CTRL + L
Frames	SHIFT + CTRL + F
Table	SHIFT + CTRL + T
Publish Field	SHIFT + CTRL + U
Form Wizard	SHIFT + CTRL + O

Format Menu Shortcuts

Document Properties	SHIFT + CTRL + D
Dynamic HTML Animate	SHIFT + CTRL + M
Font	F2
Bold	CTRL + B
Italic	CTRL + I
Underline	CTRL + U
Publish Document	SHIFT + CTRL + B
Editing in HotDog can be a whole lot faster if you use the shortcut keys below.

Triple Click	Highlights an entire line.
Double Click	Highlights a single word.
CTRL + Double Click	Highlights an object, such as a tag or a block of text.
Drag Highlighted Text	Moves text to new location.
CTRL + Drag Highlighted Text	Copies text to new location.
CTRL + ]	If the cursor is at a bracket (,),<,> this key combination will find the ‘opposite’ bracket.
CTRL + SHIFT + ]	As above, but the contents of the bracket are also highlighted.
SHIFT + · or	Highlights a character at a time.
CTRL +  · or	Moves the cursor to the next word.
CTRL + SHIFT  · or	Highlights words at a time.
CTRL + > or <	Jumps an entire object. For example, a block of text.
CTRL + SHIFT + > or <	Jumps and highlights an entire tag or block of text.
Click in the Gutter Area	Highlights a line of text
CTRL + SHIFT + 1,2,3,4,5,6,7,8,9,0	Sets a bookmark
CTRL + 1,2,3,4,5,6,7,8,9,0	Returns to set bookmark
INSERT	Toggles betwixt Insert and Overwrite mode.


Multi Level Undo and Redo

HotDog comes with multi level undo and replace. This means that you can undo any insertion into your document by pressing CTRL-Z. (that is up to your last save).

To redo any undone changes to your document, use CTRL - Y.


Syntax Checking

Note: To syntax check your tags, click on the [image] button at the bottom of your document.

Rather than performing your syntax checking after you have completed your document, HotDog gives you real time syntax checking. This means that even as you type, if you make any syntax errors, HotDog will notify you immediately. Furthermore, most times HotDog can recognize what the error is and will tell you what part of your tag is incorrect. In any event, HotDog will offer you help describing the full HTML specification of the tag.

How the Syntax Checker Works

HotDog has been programmed to recognize all tags and attributes in HTML 3.2, Netscape extensions and Microsoft extensions specifications. In fact, we tried to find every tag recognized by Netscape and Microsoft Internet Explorer. This means that as you type a HTML tag, HotDog is checking the tag against a list of nearly all recognizable tags.

Different browsers can use different tags, but all browsers have some tags they use in common.

HotDog recognizes the following tags:

HTML 3.2 Specification	Used by all browsers.
HTML 4	Partially supported by Netscape and Internet Explorer.
Netscape Extensions	Used by Netscape Browsers.
Microsoft Extensions	Used by Microsoft Browsers.
JavaScript Tags	Used by both Netscape and Internet Explorer.
User Defined Tags	Used by both Netscape and Internet Explorer.

Initially the HotDog editor only checks for HTML 3.2 tags, but you can add or remove different specifications as you need them. (After changing the specifications you will need to close and reopen your document).

As browsers improve, the number of tags they recognize increases. HotDog has been designed to be able to automatically update your syntax files using the Auto Downloader. You can also define your own tags .

Limiting Tags:

Both Netscape and Microsoft have released browsers with an extended HTML tag specification. What this means is that there are extra tags that only Netscape recognize and tags that only MS Internet Explorer can use. This can be an annoyance because it means if you use the Netscape LAYER tag, your Web page might look really cool when viewed with Netscape, but something less when viewed with MS Internet Explorer. For this reason you can limit the tags that HotDog recognizes.

For example, if you tell HotDog to only recognize HTML 3.2 tags then you won’t inadvertently use a tag or attribute that is not recognizable by both Netscape and Internet Explorer.

Note: being limited to tags is annoying. By using the JavaScript Editor Supertool you can design a web page that recognizes what browser is visiting your Website and so directs different browsers to different Web pages. This way you can maximize the use of both Netscape and Internet Explorer extensions.

Correcting Tags:

Because HotDog can recognize nearly all tags, this means that HotDog can tell you if your tags have the correct syntax. For example, type the following incorrect tag into the HotDog editor:

<TABLE  TEXT="WRAP" BORDER="3" ALIGN="MIDDLE" BORDERCOLORLIGHT="#FFFFFF">

Notice how the TEXT=”WRAP” and ALIGN=”MIDDLE” sections are highlighted. (The BORDERCOLORLIGHT=”#FFFFFF” attribute may also be highlighted because it is a Microsoft Extension).

Hold the mouse over the TEXT=”WRAP” attribute. The message ”Unrecognized attribute ‘TEXT’ for this tag” will appear. This means that the attribute TEXT does not belong in the TABLE tag, and so should be removed.

Hold the mouse over the ALIGN=”MIDDLE” attribute. The message “Unrecognized attribute value ‘MIDDLE’ for ‘ALIGN’ attribute” will appear. This means that ALIGN is a valid attribute for the TABLE tag, but the value ALIGN has been given (MIDDLE) is not correct. In this case “MIDDLE” should be replaced with “CENTER”

One way to ensure you always use the correct attributes is to use Code Completion.


Changing The Color of HTML Tags

Note: To view your different colored tags, click on the [image] button at the bottom of your document.

Changing the color of different tags is very useful because it helps you pick out the information you need to find from a jumble of HTML. It is particularly useful when you are trying to study other people’s HTML. You may want to see how they have aligned an image. The link around the image is simply a distraction.

In this example you are going to make all the tags associated with tables yellow.

Turn the Tag Manager on.

  On the View menu select ‘Resource Manager’, ‘HTML Tags’, or,

  Right click on any window from the Resource Manager ( the local file manager for example) and select HTML Tags from the right click menu.

In the list of tags that appear, click on the <TABLE> tag.

At the bottom of the HTML Tag Manager, click on the box next to the word ‘Front’.

This opens a color picker. Select the color you want to use for the tag text.

Click on the box next to the word ‘Back’. This lets you set the background color of your tag.

So far you have only made the <TABLE> tag yellow. Nearly all tables also use <TD>, <TR> and <TH>. Make these tags yellow as well. Now when you insert a table into your document, the tags appear as yellow, clearly defining your table.

I would recommend that the following tags should have their own color: tables, images and hypertext links. Generally, these three tag types make up the important content in a Web page. Having them clearly colored can aid editing.

Creating Short-Cut Keys for an HTML Tag.

As well as coloring your tags, you can create shortcut keys for them as well. For example, to quickly insert the <IMG> tag into your document you need to set a shortcut key for the IMG tag in the HTML Tag Manager.

In the HTML Tag Manager, click on the <IMG> tag.

There are 4 boxes, one for ALT, CTRL, SHIFT and a letter respectively. Decide what keyboard combination you want to use as your shortcut. For example, you might use SHIFT + CTRL + E for image. So check the box next to SHIFT, CTRL and enter an E as the shortcut key.

  To insert the IMG tag into your document, hold down the SHIFT, CTRL and E key all at once.

  To remove a shortcut key, click on the corresponding tag in the HTML Tag manager, and click delete.


Using HTML Alignment Attributes to Layout your Web Page

Understanding how to position text around images is a key element in Web page presentation. Aligning text and images (or tables) is discussed at length in this section.

Wrapping text around images.

Give your table or image an alignment to the left and then insert text after it. For example, to create the example seen left, use the following HTML code:
<IMG SRC="graphics/image.gif" ALIGN=”LEFT”>
Lots of text goes here.. .

Give your table or image an alignment to the right and then insert text after it. For example, to create the example seen left, use the following HTML code:
<IMG SRC="graphics/image.gif" ALIGN=”RIGHT”>
Lots of text goes here.. .

Put your images next to one another, but give them opposite alignments, that is, left and right. For example:
Lots of text goes here.. .
<IMG SRC="graphics/image1.gif" ALIGN=”LEFT”> some text here
<IMG SRC="graphics/image2.gif" ALIGN=”RIGHT”>
Lots more text goes here.. .

This Web page alignment is not possible using standard HTML alignment attributes. However, using tables you can easily design such a layout.

How am I supposed to know images have alignment attributes?

It would seem that this tutorial presupposes a lot of information, like knowing about the alignment attribute of images. With time you will become familiar with the different attributes in each tag. But for the meantime, use the HTML Property Sheet or Code Completion to become familiar with each tag.

For example, open the HTML Property Sheet:

1	On the View menu, select “Resource Manager”.

2	In the “Resource Manager” submenu, select “HTML Property Sheet”.

3	Now the HTML Property Sheet is open, place your cursor in the IMG tag in your document.

The HTML Property Sheet now displays all the attribites associated with the IMG tag.

Clicking on each attribute updates the help at the bottom of the Property Sheet. Click on the ALIGN attribute for help.

Aligning text with images:

Images also have vertical alignment properties. However, every browser treats these properties slightly differently. The following attributes can be used:

TEXTTOP

TOP

ABSMIDDLE

MIDDLE

BOTTOM

BASELINE

ABSBOTTOM

The problem is that while most of these attributes do the same thing, how they look differs from browser to browser. In Netscape and MS Internet Explorer there are actually only 3 different alignments you can choose. Below is a summary of the different alignments under different browsers.

Note: in each of the pictures below, the HTML is the word ‘pivot’ followed by an image. Only the alignment attribute of the image changes.

NETSCAPE

Text top aligned with the top of the image. This is equivalent to ALIGN=”TOP” or “TEXTTOP” Notice how Netscape puts an envelope around the text and aligns the invisible envelope with the top of the image.

Absolute middle of text aligned with the center of the image. This is equivalent to ALIGN=”ABSMIDDLE” only. The absolute middle of the text is the midpoint between the absolute top and bottom (i.e., the top and the bottom of the envelope around the text) of the text.

Baseline of text aligned with the bottom of the image. This is equivalent to ALIGN=”MIDDLE” or “BOTTOM” or “BASELINE” or having no alignment at all. This is the default alignment.

Absolute bottom of the text aligned with the bottom of the image. This is equivalent to ALIGN=”ABSBOTTOM” only. The bottom of the envelope surrounding the text is aligned with the bottom of the image.

Microsoft Internet Explorer 3 (MSIE3)

Text aligned with the top of the image. This is equivalent to ALIGN=”TOP” or “TEXTTOP”. Notice how there seems to be a text envelope at the top of the text. This envelope seems incongruous because MSIE3 has no other use for the ABS tags. Perhaps it is a rendering flaw.

Center of the text aligned with the center of the image. This is equivalent to ALIGN=”MIDDLE” or “ABSMIDDLE”.

Bottom of text aligned with the bottom of the image. This is equivalent to ALIGN=”BOTTOM” or “BASELINE” or “ABSBOTTOM” or having no alignment at all. This is the default alignment. That is the alignment that is used if you specify no alignment at all.


Code Completion

HotDog now supports Code Completion. Code Completion provides an easy way to insert tags and attributes into your document. The way it works is simple:

To insert a tag into a document:

1	Click in your document where you want to insert the tag.

2	Press CTRL + SPACE.

3	Use the arrow keys to select the tag you want to insert.

4	Press ENTER to insert the tag.

To insert an attribute into a tag:

1	Click inside a tag (but not over an existing attribute).

2	Press CTRL + SPACE.

3	Use the arrow keys to select the attribute you want to insert.

4	Press ENTER to insert the attribute.

(You maybe prompted to press ENTER again to open a dialog (e.g., to open a file dialog to pick an image)).

5  Press SPACE to enter another attribute, otherwise press ESC to close the Code Completion dialog.

For a graphical example open and preview codecomp.html in the HTMLFiles directory under HotDog5.


Previewing a Document

There are two ways of previewing documents in HotDog, using an Internal Browser (Rover) or an External Browser. An Internal Browser is a browser that is used inside HotDog, an External Browser is a browser that runs outside of HotDog.

To preview using an External Browser, do one of the following:

•	On the File Menu, select Preview Document and then select the browser in which you want to preview your work.

•	Click [image] on the Standard Toolbar and select the browser in which you want to preview your work.

•	Press F9 - If you have more than one browser installed, your document is previewed using the most recently used browser.

To preview using an Internal Browser:

•	At the bottom of your document click [image] or [image].

These icons represent the Rover View and the Web View respectively.

Rover View is used for just getting a quick look at what your web page looks like, using Web View you can surf from inside HotDog and Download any web pages (and their images) that you happen to like. (Just click [image])

When you first start HotDog

If you have any External Browsers on your system, HotDog will try to find them for you automatically. Should it not find some, you will need to tell it where they are. For more details see HotDog Preferences, Browsers.

How HotDog sets up different browsers

HotDog comes with it’s own internal browser, ready to go. This browser however is fairly primitive, and can not display JAVA or Dynamic HTML. When you first install HotDog, if you have Internet Explorer (I.E.) installed on your system you will be asked if you want to use I.E. as the internal browser, instead of HotDog’s default browser. It is recommended you accept this option. Whatever browser you use as the internal browser, it is called ‘Rover’.

Customizing Rover

You can customize Rover (the Internal Browsers) using the Preferences window. For more more details, see HotDog Preferences, Rover.

Try downloading browsers from the following sites:

http://www.netscape.com

http://www.operasoftware.com

http://www.microsoft.com


King in Yellow